I'm having trouble dynamically creating div elements based on the selected option value, but for some reason ng-repeat isn't working as expected. Can you help me figure out what I'm missing?
Here's the HTML snippet I'm using -
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Select Example - AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<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">
</select>
<div ng-repeat="event.shiftnumber">{{event.shiftnumber}}</div>
</body>
</html>
And here's my Script -
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope){
$scope.shiftnumbers = [];
for(var i=0; i< 23; i++) {
$scope.shiftnumbers.push({name: i, value: i});
}
});
Check out this PLNKR LINK for a live demo - http://plnkr.co/edit/UruYYbXrTgxqXadIb8A3?p=preview