We Keep Coding

AngularJS changing dropdown value with ng-model

nameList contains [“Julia”, “Evan”, “Tomas”];
select ng-model=“names” ng-options=“x for x in nameList”
In controller, I have a service api call GetNameByID/{id}”and depending on the id, I want to initialize the dropdown value of the modal form.
So if the user clicks ID 1, the dropdown defaults to Julia.
The problem is within the service call, when I try to initialize the model by doing $scope.names = data, it adds an empty option at the top instead of selecting Julia. When I console.log(data), it prints “Julia” but it becomes <option value=“?”></option>
How can i fix this?

So Lets have a HTML example for this case:
<div ng-app ng-controller="MyCtrl">
<select ng-model="names" ng-options="item for item in nameList">
</select>
<p>Selected : {{names}}</p>
<button ng-click="Update(2)"> Update(1)</button>
</div>
and Conrtoller has one service call which update your dropdown accordingly based on index.
function MyCtrl($scope) {
$scope.names = "Julia"
$scope.nameList = ["Julia", "Evan", "Tomas"];
$scope.Update = function(_value){
$scope.names = $scope.nameList[ parseInt(_value)] ;
}
}
Please have a look into running code, jsfiddle.

You can just use ng-init to initialize the dropdown first value like so:
<select ng-model="names" ng-init="names = data[0]" ng-options="x for x in data">
<option value="">Select</option>
</select>
Where [0] in data[0] is the position of the array.

Here is an example where you can set the option
In html file
<select ng-model="selectedName" ng-options="x for x in nameList"></select>
In js file
app.controller('myCtrl', function($scope) {
var id = 1;
$scope.names = ["Julia", "Evan", "Tomas"];
$scope.selectedName = $scope.names[id-1]; <---- here you can pass you id.
});
subtract id with 1 because array start with 0. Hope this is what you want to acheive.

Select tag ng-model returns an undefined value

I have a select tag in my html code like this:
<select ng-model="brandList" name="brandList" style="width:110px;" >
<option value="" selected>---Please select---</option>
<option ng-repeat="item in brandnameList | unique:'brandname'" value="{{item.brandname}}" style="width:50px;"> {{item.brandname}}</option>
</select>
The values in my select was fetched from the database via API and the code goes like this.
adminService.getbrandnameList()
.then(function(data){
$scope.brandnameList = data.data;
$scope.brandn=data.data[0].brandname;
});
I have another function that needs the selected value on the select tag
$scope.ExportmodalAdmin = function () {
alert( $scope.brandList )
}
But the model for the select which is $scope.brandList returns an undefined value. How can I fix this? I need the value from the select tag to be passed on the function.

Hope you have defined the variable brandList in your controller.
$scope.brandList = {};
Also, Change your ng-repeat statement as below:
<select ng-model="brandList" name="brandList" ng-options="item.brandname for item in brandnameList" style="width:110px;" ng-change="alertChange()" >
<option value="" selected>---Please select---</option>
</select>
Controller code to check change:
$scope.alertChange = function(){
alert($scope.brandList.brandname);
};
look at plunker reference here plunk

ng-selected with ng-repeat in select

Sorry for asking again . But I cant set default value for select . Here is code I used
Plnkr
I cant use ng-options in this case . Please help me without ng-options

If the model has the value same as option defined, ng-selected would work as:
ng-selected="business_entity == businessConstants"
given the model is such :
$scope.formData = {business_entity : 'Công ty TNHH'};
Forked Plunker

Try to use the code in your controller as below,
$scope.formData={};
$scope.formData.business_entity = 'Công ty TNHH';
And please remove 'ng-selected' from your option tag from your tempalte.
<select ng-model="formData.business_entity">
<option ng-repeat="businessConstants in businessConstants" value="{{businessConstants}}">
{{businessConstants}}
</option>
</select>
I've update your plnk please check..

remove ng-select and assign array reference to ng-model variable
$scope.formData = {
'business_entity' : $scope.businessConstants[1]
}
Html
<select name="" id=""
ng-model="formData.business_entity">
<option
ng-repeat="businessConstants in businessConstants"
value="{{businessConstants}}">
{{businessConstants}}
</option>
</select>
Demo

Change your HTML to
<body ng-controller="ctrl">
<select name="" id=""
ng-options="option for option in businessConstants"
ng-model="business_entity">
</select>
</body>
Your options will be automatically generated and the select will be bound to business_entity automatically
Change Controller to
function ctrl($scope) {
$scope.businessConstants = [
'Công ty Cổ phần',
'Công ty TNHH',
'Tổ chức nhà nước',
'Ngân hàng',
'Trường học',
'Cá nhân',
'Khác'
];
$scope.business_entity = $scope.businessConstants[4];
}
This will set the default value. Make sure you select the default value from the existing collection businessConstants and not assign it.
You can refer updated Plunker link

Angular select, ng-init with dynamic value

I'm trying to get a select box working in Angular. The problem I'm experiencing is to do with ng-init and setting it's default value from an object which is created during runtime. Heres my code:
<select
ng-model="settings.editing.panel.data.production_company"
ng-change="settings.editing.panel.data.production_company = selectValue"
ng-init="selectValue = settings.editing.panel.data.production_company"
>
<option
ng-repeat="(key, value) in lists.production_companies"
value="{{key}}"
ng-selected="{{selectValue}}"
>
{{value}}
</option>
</select>
"lists.production_companies" is a simple key-value array of names, populated during initial page render, updated by ajax.
The object "settings.editing.panel.data" starts its life as NULL, but later is loaded with a correctly formatted object which contains the property "production_company".
I have found setting ng-init to something like "ng-init="selectValue = 3" works fine. Setting a $scope.test = 3, then setting "ng-init="selectValue = test" works fine too.
However, my dynamic value does not work. How can I use my dynamically created object to set the value of this select box during runtime with the set-up I have?

<select
ng-model="settings.editing.panel.data.production_company"
ng-options = "option as option.keyName for option in list.production_companies"
> <!--set keyName equal to your object's key-->
</select>
Then in your controller
$scope.settings.editing.panel.data.production_company = list.production_companies[0] // Or which value you want to assign

You question confused me somehow. The following snippet is a working one, is that what you want?
'use strict';
angular.module('DemoApp', []);
angular.module('DemoApp').controller('DemoCtrl', ['$scope', function($scope){
$scope.lists={
production_companies: { "0": "prod 1", "1":"prod_2" },
};
$scope.settings={
editing: {
panel: {
data: null
}
}
};
$scope.setData=function(data){
$scope.settings.editing.panel.data={
production_company: data
};
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<select ng-model = "settings.editing.panel.data.production_company">
<option ng-repeat = "(key, value) in lists.production_companies" value = "{{key}}">{{value}}</option>
</select>
<div>You select: {{settings.editing.panel.data.production_company}}</div>
<button ng-click="setData('0')">Set Data to Prod1</button>
<button ng-click="setData('1')">Set Data to Prod2</button>
</div>

In my circumstances I was able to change my backends data format to set an object like:
{"id": 1, "name":"prod comp 1"}
and then change my select model accordingly. In hindsight I needed this for the ID anyway.
<select
ng-model="settings.editing.panel.data.production_company"
>
<option
ng-repeat="option in settings.lists.production_companies"
value="{{option.id}}"
ng-selected="{{option.id}} == settings.editing.panel.data.production_company"
>
{{option.name}}
</option>
</select>

Get values selected from SelectBox Angularjs

I'm new to Angularjs and I have selectBox with two variables (startDate and endDate):
<div>
<select class="form-control" ng-model="date.time">
<option ng-repeat="time in dateList" value="{{time.startDate}},{{time.endDate}}" >
{{time.startDate| date:'medium'}} - {{time.endDate | date:'medium'}}</option>
</select>
</div>
After the user select a period I want to get the startDate and endDate separately.

Did you try looking at what your value holds when you're done selecting? You'll get the string you put inside the option's value.
var dates = $scope.date.time.split(','),
startDate = dates[0],
endDate = dates[1];

With the ng-options syntax you can set to your date.time the whole object:
<select class="form-control" ng-model="date.time" ng-options="time as ((time.startDate | date:'medium') + ' - ' + (time.endDate | date:'medium')) for time in dateList"></select>

What ever you have bound in your ng-model will hold the selected value.
In your case the ng-model is holding date.time, which may not be what you are looking for.
Additionally you should set the value to be the data that you wish to extract from the option list.
Please see this (poorly and quickly constructed) jsFiddle
html
<div ng-controller="MyCtrl">
<select class="form-control" ng-model="selected">
<option ng-repeat="time in dateList" value="{{time}}" >
{{time.prop}}</option>
</select>
{{selected}}
</div>
js
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.selected = 'plz select a thing';
$scope.dateList = [{prop:'prop1'}, {prop:'prop2'}];
}