title: Create div dynamically on option select in AngularJS
body: <p>I am trying to create <code>div</code>s dynamically using option select value but <code>ng-repeat</code> not working. Let me know what I am doing wrong here.</p>
  
  <p>Following is my HTML code -</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Select Example - AngularJS&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="myCtrl"&gt;
      &lt;select id="shiftnumbers"
              ng-model="event.shiftnumber"
              ng-options="timeslot.value as timeslot.name for timeslot in shiftnumbers"
              ng-init="event.shiftnumber = shiftnumbers[0].value"
              class="btn"&gt;
      &lt;/select&gt;
      &lt;div ng-repeat="event.shiftnumber"&gt;{{event.shiftnumber}}&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Following is my <code>Script</code> -</p>
  
  <pre><code>var myApp = angular.module("myApp", []);
  
  myApp.controller("myCtrl", function($scope){
  
      $scope.shiftnumbers = [];
      for(var i=0; i&lt; 23; i++) {
          $scope.shiftnumbers.push({name: i, value: i});
      }
  });
  </code></pre>
  
  <p>PLNKR LINK  - <a href="http://plnkr.co/edit/UruYYbXrTgxqXadIb8A3?p=preview" rel="nofollow">http://plnkr.co/edit/UruYYbXrTgxqXadIb8A3?p=preview</a></p>