Two-way Binding Directive control

by Venu Pavuluri

HTML

<div ng-app="myApp" ng-controller="MyCtrl">  
  Country <selected-country selected-item="selectedCountry"></selected-country>
  <br/>
  {{selectedCountry}}
</div>

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
  $scope.name = 'World';
  $scope.selectedCountry = 'N/A';
}).directive('selectedCountry', function() {
  return {    
    restrict: 'E',    
    scope: {
      selectedItem: '='
    },
    controller: function($scope) {
      $scope.countries = [{
        name: 'USA',
        value: 'US'
      }, {
        name: 'Canada',
        value: 'CAN'
      }];      
    },
    template:"<select ng-model='selectedItem' ng-options='c.value as c.name for c in countries'></select>"
  };
});