We Keep Coding

angular js select box comes empty option at first

I am using angular 1.6.4 I want to display ages in select box so get values from controller, I use below code, but first field will come empty? please help me how to solve it
<select ng-model="agefrom" name="agefrom" id="agefrom" class="select" style="width: 45%">
<option ng-repeat="age in ages" ng-value="age">{{age}}</option>
</select>

the first option comes empty because you did not select a ngModel. add value to ngModel and also use ng-options instead ng-repeat
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.ages = [2,3,4];
$scope.agefrom = $scope.ages[0]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="agefrom" name="agefrom" id="agefrom" class="select" style="width: 45%" ng-options="age as age for age in ages">
</select>
</div>

You can simply use ng-init like this
<select ng-init="agefrom = ages[0]"
ng-model="agefrom"
name="agefrom" id="agefrom" class="select"
style="width: 45%">
<option ng-repeat="age in ages" ng-value="age">{{age}}</option>
</select>

how to add values from array to Bootstrap combobox with search

I am using the bootstrap combobox with search which is working fine when populated with static options as follows:
<form role="form">
<div class="form-group">
<label>Select options</label>
<select class="combobox input-large form-control" style="display: none;">
<option value="" selected="selected">Type Planet name...</option>
<option value="0">Mercury</option>
<option value="1">Earth</option>
<option value="2">Venus</option>
<option value="3">Mars</option>
<option value="4">Jupiter</option>
</select>
</div>
</form>
I want to load the options dynamically from an array. i tried ng-options and ng-repeat but the values are not coming inside the combo box. I will prefer using javascript.
Tried option:
<select class="combobox input-large form-control" style="display: none;"
ng-model="PlanetData.selectedPlanet">
option value="" selected="selected">Type for Planet...</option>
<option ng-repeat="planet in PlanetData.availablePlanets" value=" {{planet.id}}">{{planet.planetName}}</option>
THis creates the combobox with the text "Type for channel", but the planetdata does not appear in the the combobox options rather it appears below it. I want to know how to bind the two so that the data comes in the combobox.

The problem is that when the combobox function is called the ng-repeat or the ngOptions didn't rendered the options yet.
One quick way to fix this is call the $('.combobox').combobox() inside a $timeout callback.
$scope.items = [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}];
$timeout(() =>
$('.combobox').combobox(), 0);
See the plunker with this example: https://plnkr.co/edit/j25lasvpHxmMNUjl7EjE?p=preview
I tested with ngRepeat and ngOptions.

var planet = ['Mercury','Mercury1'];
$.each(planet, function(index, value){
$('.combobox').append('<option value="'+index+'">'+value+'</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form">
<div class="form-group">
<label>Select options</label>
<select class="combobox input-large form-control">
</select>
</div>
</form>

The issue was because of the ng-options or ng-repeat not getting rendered when the combobox was appearing. Refer to the answer from Rafael, it has all the necessary details. I used the timeout as he suggested and it worked like a charm.
$timeout(() =>
$('.combobox').combobox(), 100);

How to get value from dropdown list with angularjs

I populated a select box with data from the backend and it works well, but when I click on an item to get its value, it gives me undefined:
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option ng-repeat="var in payloadSecteur" value="{{var.id}}">{{ var.secteur }}
</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
Here's the function:
$scope.showPopup=function(){
alert('eee');
alert($scope.MyData);
};

This is a working snippet of your code without the value attribute set in the option tag and the options have been hard coded ,it is working perfectly
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option>heldfd</option>
<option>asdf</option>
<option>asdf</option>
<option>asdf</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showPopup=function(){
alert($scope.MyData);
};
});
</script>

Did you put your html code to div with ng-app and ng-controller defined and defined them in your Angular file? Remember also to write your Angular function into the controller.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
</div>
Angular:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}
});
</script>
Remember also, that you don't have to use <option> tag - <select> with ng-options will be enough.

<div ng-controller="MyCtrl">
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData" ng-options="payloadSecteur for payloadSecteur in payloadSecteur"></select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.payloadSecteur = ['one', 'two', 'three', 'four'];
$scope.showPopup = function() {
console.log('eee');
console.log($scope.MyData);
};
}
JSFiddle

Try this:
Pass ng-model as a parameter in showPopup() like
ng-click="showPopup(MyData)"
In controller
$scope.showPopup=function(selectedData){
alert('eee');
alert(selectedData);
};

AngularJS - ng-change not firing

I'm setting the ng-change directive in a select element of my form but the function linked to it is not called when I change the value. I've been reading very similar questions and applying the answers I see and so far none has worked yet.
Can you see wjat I'm doing wrong?
My HTML:
<div class="row" ng-app="quoteApp">
<div class="col-lg-12" ng-controller="QuoteController" ng-init="initialize()">
<h1 class="page-header">Quote</h1>
<div class="form-group">
<label>Carrier</label>
<select class="form-control" ng-model="form_carrier_id" ng-change="loadProducts()">
<option ng-repeat="carrier in carriers" value="{{carrier.id}}">{[{carrier.name}]}</option>
</select>
</div>
<div class="form-group">
<label>Product</label>
<select class="form-control" ng-model="form_product_id">
<option value=""></option>
<option ng-repeat="product in products" value="{{product.id}}">{[{product.name}]}</option>
</select>
</div>
</div>
</div>
And my controller:
angular.module('quoteApp', ['angular-loading-bar']).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
.controller('QuoteController', function ($scope, $http) {
$scope.carriers = [];
$scope.products = [];
$scope.form_carrier_id = '';
$scope.form_product_id = '';
$scope.getUrl = function(action){return '/admin/application/quote/json?action='+ action;}
$scope.initialize = function(){
// Get the list of carriers
$http.get($scope.getUrl('getCarriers'))
.success(function (data) {
$scope.carriers = data;
})
.error(function () {
alert('Error loading carriers');
});
}
$scope.loadProducts = function(){
alert('HERE');
}
});
For me everything looks right. Can you see what I'm missing? The first select loads normally, the problem is that when I change its value the function loadProducts is not fired.
Thanks

this may not be the problem itself, however you should always use ng-options rather than <option ng-repeat>
I've seen some weird behaviour in the past due to that

I have found what was the problem. It was how I was filling the select. It has to be filled like this:
<select class="form-control" ng-model="form_carrier_id"
ng-options='carrier.id as carrier.name for carrier in carriers'
ng-change="loadProducts()">
</select>

Try using ng-options for repeating the products in your select element.
You can use ng-options as follows:
<select class="form-control" ng-model="form_product_id"
ng-options="product.id as product.name for product in products" ng-change="loadProducts()">
<option value="">Select color</option>
</select>
not as the products are set values, the loadProduct should trigger, whenever a value is selected as the ng-model would be set

Select Tag Options won't work with ng-repeat

I need to use ng-repeat with the options within a Select menu like so
<select name="category" id="category" ng-model="rumor.category" validation-pattern="requiredOnly" error-icon>
<option ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</option>
</select>
However on rendering my select is empty and when inspecting the console I see the following:
<select id="category" class="ng-scope ng-pristine ng-invalid ng-invalid-required" ng-model="rumor.category" name="category" required="required">
<option value="? undefined:undefined ?"></option>
</select>
Now I know I should really use ng-options on the select menu however I wish to include angular-ui / ui-select2 which is incompatable with ng-options and the documentation recomends using a repeater (see https://github.com/angular-ui/ui-select2)
When I use the same repeater on a different tag, for example:
<p ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</p>
the repeater works as expected. Any ideas why this is?
Thanks in advance.

You shouldn't use ng-repeat for select options. Use ng-options (link) instead:
<select name="category"
id="category"
ng-model="rumor.category"
validation-pattern="requiredOnly"
error-icon
ng-options="c.cat for c in formOptions.categories">
</select>

You can use select option with ng-repeat.
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.categories = [ {'cat' : '1'}, {'cat' : '2'}, {'cat' : '3'}, {'cat' : '4'}] ;
}
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="item.value">
<option ng-repeat="cat in categories" value="{{cat.cat}}">{{cat.cat}}</option>
</select>
</div>
</div>
You can also fiddle: http://jsfiddle.net/usmanfaisal/vHw7N/