Sample drop-down binding

Providing a drop-down of keys and values without a directive.

by krimple

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo'>
    <h3>Greeting</h3>
    <p ng-controller='MyCtrl'>Hi, it's {{name}}. 
        The current time is <display-time />.</p>
    
    <form>
        <select ng-model="myGroup" ng-options="select as label for value in myGroups">
            <option>Choose a group</option>
        </select>
    </form>
</div>

JavaScript

var demo = angular.module('demo', []);
demo.directive('displayTime', function($parse) {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<span class="currentTime"></span>',
        link: function (scope, element, attrs, controller) {
            var currentDate = new Date();
            element.text(currentDate.toTimeString());
        }
    }});

function MyCtrl ($scope) {
    $scope.name = 'Ken';   
    $scope.myTime = new Date();  // now 
    
    $scope.myGroups = [
        {label:'Admin', value:1},
        {label:'Users', value:2},
        {label:'Public', value:3}
    ];
};