Ng-Bind-10

 

In this example we have an array of cities with thier name and code, we bind the cities array with the select list using the ng-options directive and as the user select any option from the select list the code of the city display below the select list as we bind the selected value with the span below it.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController" ng-init="city.code='ON'"> <select ng-model="city.code" ng-options="city.code as city.description for city in cities"></select> <br /> <span ng-bind="city.code"></span> </div> <script> var app = angular.module("myApp", []); app.controller('myController', ['$scope', function ($scope) { $scope.cities = [ { code: 'ON', description: 'Ontario' }, { code: 'QC', description: 'Quebec' }, { code: 'NS', description: 'Nova Scotia' }, { code: 'NB', description: 'New Brunswick' }, { code: 'MB', description: 'Manitoba' }, { code: 'BC', description: 'British Columbia' }, { code: 'PE', description: 'Prince Edward Island' }, { code: 'SK', description: 'Saskatchewan' } ]; }]); </script> </body> </html>
Output