SO27728824

var app = angular.module('plunker', []);

app.directive("myDirective",[function() {
  
  return {
    replace: true,
    scope: {},
    templateUrl: "myDirective.html",
    link: function(scope,elem,attr) {
      var grades=[{
        id: 100, name: "white"},
        {id: 200, name: "blue"},
        {id: 300, name: "purple"}
        ]
      
      scope.grades=grades; 
      
      // selct box in DOM is not populated here yet with grade
      // and so setting will not have any effect
      // so I put this in a queue so browser have a chance
      // to update DOM and then I set selcted option
      scope.mygrade=grades[2].id; 
    }
  }
}])

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
    <script src="app.js"></script>
  
  <script type="text/ng-template" id="myDirective.html">
  <div>
    <select ng-model="mygrade" ng-options="grade.id as grade.id + ' ' + grade.name for grade in grades">
    </select>
    <span>model : {{mygrade}}</span>
    </div>
    </script>
      
    </head>

  <body>
    <div my-directive></div>
  </body>

</html>

/* Put your css in here */