Angular: Empty Fiddle

http://angularjs.org/

by martijngr

HTML

<script src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
Select list:<br/>
<div ng-controller="MyCtrl">
    <select-list ng-model="building.NormId" on-change="saveBuilding()"></select-list>
        
    <div>
        Id: {{building}}<br/>
        {{val}}
    </div>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    window.items = [{Id: 1, Name:'A'},{Id: 2, Name:'B'},{Id: 3, Name:'C'}];
    
    $scope.val = "";
    setBuilding();
    
    $scope.saveBuilding = function(){
        $scope.val = $scope.building.NormId;
    }
    
    function setBuilding(){
        $scope.building = {
            NormId: 3,
        };
    }
}

myApp.directive('selectList', ['$injector', '$parse', function ($injector, $parse) {
    var attrs, ctrl;

    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            change: '&onChange',
        },
        require: 'ngModel',
        link: function (scope, element, attributes, controller) {
            ctrl = controller;
            attrs = attributes;

            RegisterModelWatch(scope);
            RegisterSelectedItemWatch(scope);
            LoadFromListService(scope, attributes);

        },
        template: '<select ng-options="item.Name for item in items" ng-change="change()" ng-model="selectedItem" class="form-control"></select>'
    };

    function RegisterModelWatch(scope) {
        scope.$watch('ngModel', function (newVal, oldVal) {
            if (newVal !== oldVal) {
                UpdateSelectedItem(scope);
            }
        });
    };

    function RegisterSelectedItemWatch(scope) {
        scope.$watch('selectedItem', function (newVal, oldVal) {
            if (newVal !== oldVal) {
                scope.ngModel = scope.selectedItem.Id;
            }
        });
    };

    function UpdateSelectedItem(scope) {
        scope.selectedItem = _.findWhere(scope.items, { Id: scope.ngModel });
    };

    function LoadFromListService(scope, attributes) {
        scope.items = window.items;
        UpdateSelectedItem(scope);
    }
}]);