Angularjs ui-select used in directive

Question

I am using angular-ui ui-select directive inside my cusom directive called timezone. The problem is that the surrounding controller's model object is not updated when a timezone is selected from the list. Here is my directive's code:

var myApp = angular.module('MyApp', ['ui.select','ngSanitize']);

myApp.directive('timezone', function () {
return {
    restrict: 'AE',
    template: '<ui-select theme="bootstrap" ng-model="tzModel" style="min-width: 300px;"> <ui-select-match placeholder="Select a timezone in the list">{{$select.selected}}</ui-select-match> <ui-select-choices repeat="tz in timezones | filter: $select.search"> <div ng-bind-html="tz"></div> </ui-select-choices> </ui-select>',

    scope: {
        tzModel : '=',
    },
    link: function(scope) {
        scope.timezones = ["Africa/Abidjan", "UTC"];
    }
};
});

My Controler:

myApp.controller('MyCtrl', function ($scope) {
  $scope.foo = {name:"Africa/Abidjan"};
});

Here is how I use it in html:

<div ng-app="MyApp" ng-controller="MyCtrl">
  {{foo}}<br />
  <timezone tz-model="foo.name" />
</div>

The problem is that when I select a new value from dropdown list, my controller object is not updated. Here is the jsFiddle I guess there is a problem with ui-select because I have done the same job with other components.

Phoenician

Answer 1

You need to set ng-model="tzModel.name" in ui-select directive.

https://github.com/angular-ui/ui-select/wiki/FAQs#ng-model-not-working-with-a-simple-variable-on-scope

<timezone tz-model="foo" />

<ui-select theme="bootstrap" ng-model="tzModel.name" ...

https://jsfiddle.net/XyUGE/264/

Flagstone

Thanks @Flagstone you are completely right. I ended up using the 'hack' solutiion mentioned in your link where we use $parent.tzModel in ng-model of directive. Because I don't want to force the users of the directive to have a 'name' field in their model objects. – Phoenician

Answer 2

I made changes to your fiddle, look at this, it is working -> fiddle

You have to make the following changes

in view.html

<div ng-app="MyApp" ng-controller="MyCtrl">
    {{foo.name}}<br />
    <timezone tz-model="foo" />
</div>

change the 3rd line to tz-model = "foo"

in controller.js

var myApp = angular.module('MyApp', ['ui.select','ngSanitize']);

myApp.controller('MyCtrl', function ($scope) {
    $scope.foo = {name:"Africa/Abidjan"};
});

myApp.directive('timezone', function () {
    return {
        restrict: 'AE',
        template: '<ui-select theme="bootstrap" ng-model="tzModel.name" style="min-width: 300px;"> <ui-select-match placeholder="Select a timezone in the list">{{$select.selected}}</ui-select-match> <ui-select-choices repeat="tz in timezones | filter: $select.search"> <div ng-bind-html="tz"></div> </ui-select-choices> </ui-select>',

        scope: {
            tzModel : '=',
        },
        link: function(scope) {
            scope.timezones = ["Africa/Abidjan", "UTC"];
        }
    };
});

According to the docs, you have to keep model as "tzModel.name" instead of "tzModel" .... Hope it helps

Betancourt

Thanks @akashrajkn. Your solution is correct. I accepted the previous one because it was submitted earlier. Thank you very much – Phoenician