We Keep Coding

AngularJS - ng-options not populating the list of objects

Am trying to populate combo box in AngularJS. Below is the controller code.
var app = angular.module('app');
app.controller('roadmap', function($rootScope, $scope, $http, $q, leFactory) {
$rootScope.activityInfoList=[];
$rootScope.brand_strategy_list=[];
$rootScope.brand_strategy_csf=[];
$rootScope.brand_strategy_initiatives=[];
leFactory.getActivityPopupInfo().then(function(activityList) {
$rootScope.activityInfoList=angular.copy(activityList);
console.log($rootScope.activityInfoList);
$rootScope.brand_strategy_list=$rootScope.activityInfoList.listBrandStrategy;
console.log($rootScope.brand_strategy_list);
console.log('editActivityPopup service accepted-> ');
}, function(error) {
console.log('editActivityPopup service rejected-> ', error);
});
$rootScope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
});
In the HTML part, am trying to populate $rootScope.brand_strategy_list as below.
<select ng-model="activityInfoList.brandStrategy" class="selectpicker" data-style="btn-inverse" style="display: none;" ng-options="item.strategyName as item.strategyName for item in brand_strategy_list">
<option> Select </option>
</select>
$rootScope.brand_strategy_list is not getting populated. But when I tried populating $rootScope.items, it is getting populated. I made console.log($rootScope.brand_strategy_list) and its showing the complete list.
Dont know what mistake am doing? Pls help me solve this issue. Thanks in Advance.

Try this
ng-options="item.strategyName as item.strategyName for item in $root.brand_strategy_list

Remove style="display: none;" from html and change $rootScope to $scope
<select ng-model="activityInfoList.brandStrategy" class="selectpicker" data-style="btn-inverse" ng-options="item.strategyName as item.strategyName for item in brand_strategy_list">
<option> Select </option>
</select>

Trouble with AngularJS and Select binding not loading default values

I am having trouble with a <select> input and binding with AngluarJS. I've created a minimum working sample on Plunker: http://plnkr.co/edit/P4T25RoJrU4mvbBiUJ9S?p=preview.
The basic issue is as follows: the value in the dropdown is never pre-selected with the value from my model.
Additionally, in Angular 1.1.5, ng-options appears to not include a "label" on the generated <option> tags, so when you change selection the drop down control doesn't register any change.

Two issues:
Compare strings to strings
Be careful when using select as and track by in the same expression.
JS
angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
//USE this
selectedOption: '2'
//NOT this
//selectedOption: 2 //This sets the default value
};
}]);
HTML
<!-- remove 'track by option.id' -->
<select name="mySelect" id="mySelect"
ng-options="option.id as option.name for option
in data.availableOptions track by option.id"
ng-model="data.selectedOption">
</select>
From the Docs:
Be careful when using select as and track by in the same expression.
This will work:
<select
ng-options="item as item.label for item in items track by item.id"
ng-model="selected">
</select>
but this will not work:
<select
ng-options="item.subItem as item.label for item in items track by item.id"
ng-model="selected">
</select>
-- AngularJS ng-options Directive API Reference

As requested by OP, adding the comment as the answer.
If you remove the "track by option.id" from the ng-options as following, it should pre-select based on your model.
<select name="mySelect" id="mySelect"
ng-options="option.id as option.name for option in data.availableOptions"
ng-model="data.selectedOption"></select>
Check out the modified Plunker: http://plnkr.co/edit/b4ddyA5Q4jGNcJI1d8eW?p=preview

Use select in angular to pass multiple arguments

In Angular Js is there a way to use a select element the same way you can with a list of links?
For example if I have some links like this:
<a ng-click="ctrl.change('argument1','argument2')">One</a>
<a ng-click="ctrl.change('argument3','argument4')">Two</a>
...
Is there a way I can do the same thing with a select element?
<select>
<option value="argument1,argument2">One</option>
<option value="argument3,argument4">Two</option>
...
</select>

you can pass the variables and model through ng-change , hope below code helps you,
template
<div ng-controller="myCtrl">
<select ng-model="item" ng-options="i.name for i in items" ng-change="changed('hello','world',item)">
<option value="">choose items</option>
</select>
</div>
controller
function myCtrl($scope) {
$scope.items = [{
"name": "first",
"type" : "type1"
}, {
"name": "second",
"type" : "type2"
}, {
"name": "third",
"type" : "type3"
}];
$scope.changed = function (hello,world,item) {
alert(hello); // argument1
alert(world); //argument2
alert(item.type); //model argument based on the selection
}
}

do u mean this? use controller value instead of scope value if u wish
<select ng-options="['a,b','c,d']" ng-model="selected" ng-change="ctrl.change(selected)">

AngularJS option selected

I know there's been a lot of questions for this but I am having the most annoying time figuring out how AngularJS handles select option values and which one is selected. I have a simple item which I pass onto a modal window. This item contains template_id. I also have templates which have a name and an id and I wish to create a simple select where the option which has the value of the item's template_id gets selected:
<select name="templateId">
<option value="8000">name</option>
<option value="8001" selected>name 2</option>
</select>
Now with AngularJS I do this:
<select name="templateId"
ng-model="domain.templateId"
ng-options="t.template_id as t.name for t
in templates track by t.template_id">
<option value="">Choose template</option>
</select>
In the controller I set the 'selected' value with:
Data.get('templates').then(function(result) {
$scope.templates = result;
});
$scope.domain = {
template_id: item.template_id,
templateId: { template_id: item.template_id }
};
I have actually gotten to a point where I can send the template_id to the REST API and the response there reads
template_id: 8000
However, there is some minor annoying behaviour in the select element. I get the item I want selected, but when I attempt to select another option it switches the selected to the pre-set 'Choose template' option but the value or rather the 'real selected item' is still the original "selected" value I set in the controller. I can see it in the REST API response. This is not however what I selected. After this initial bug it continues to work as it's supposed to but how can I get rid of this?

Here a example to solve your issue.
angular.module('app.select', [])
.controller('SelecetCtrl', function($scope) {
$scope.templates = [{
template_id: 1,
name: 'tst1'
}, {
template_id: 2,
name: 'tst2'
}, {
template_id: 3,
name: 'tst3'
}];
$scope.selected = {
template: {
template_id: 2
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app.select'>
<div ng-controller='SelecetCtrl'>
<select name="templateId" ng-model="selected.template"
ng-options="t as t.name for t
in templates track by t.template_id">
<option value="">Choose template</option>
</select>
</div>
</div>

Angularjs show selected option from ng-repeat value

I have drop down inside ng-repeat as follows.
<div ng-model="list in lists">
<div>
<select ng-model="pType" ng-options="c.name in projType"></select>
<option value="{{list.value}"></option>
</div>
My Controller is
App.controller('pOverCtrl', function ($scope, pOverRepository, $location) {
$scope.lists = projOverRepository.query();
$scope.projType = [
{ value: '0', name: 'None Selected' },
{ value: '1', name: 'Construction' },
{ value: '2', name: 'Maintenance' },
];
})
The dropdown gets populated fine. But my goal is that when ng-repeat is executed it automatically shows the value that is coming from lists scope as selected.
Please let me know how to fix this issue.

use the diretive ng-selected
<div ng-model="list in lists">
<select ng-model="pType" ng-options="c.name in projType">
<option ng-selected="list.value == list.selected" value="{{list.value}"></option>
</select>
</div>
assuming that list.selected variable contains the value of the option selects

$scope.pType should have the selected value as it's bind by ng-model.
Read the docs here: http://docs.angularjs.org/api/ng/directive/select
And if you already have the selected value in $scope.lists, you can use the ngSelected directive.