My Selector Directive (select)

by Dejan Vasic

HTML

<div ng-app='selectModule' ng-controller='homeCtrl'>
    <my-selector hello='myValue' on-item-changed='myHandler()'></my-selector>
</div>

JavaScript

angular.module('selectModule', [])
    .controller('homeCtrl', function ($scope) {
    $scope.myValue = {
        foo: 2
    };
    $scope.myHandler = function () {
        console.log('go');
    };
})
    .directive('mySelector', function () {
    return {
        restrict: 'E',
        scope: {
            hello: '=',
            onItemChanged: '&'
        },
        template: '<select ng-model="hello.foo" ng-change="optionChanged(hello)" ng-options="opt.name for opt in myCustomOptions"></select>',
        controller: function ($scope) {
            $scope.usr = 1;
            $scope.optionChanged = function (item) {                
                $scope.onItemChanged();
            };
            $scope.myCustomOptions = [{
                name: 1
            }, {
                name: 2
            }];
        }
    };
});