Директива Angularies, зміна ng-моделі - javascript, angularjs, angularjs-directive

Я роблю директиву, яка імітує a <select>, але дозволяє мені більше стилю, але не міг знайти ніякої інформації про те, як його реалізувати за допомогою ng-моделі.

.directive("customSelect", [function() {
return {
restrict:"EA",
require: "ngModel",
scope:{
choices:"=",
selected:"="
},
template:"
<div class="custom-select">
<div class="label">{{ selected }}</div>
<ul>
<li data-ng-repeat="choice in choices" data-ng-click="ngModel = choice">{{ choice }}</li>
</ul>
</div>",
replace:true
}
}])

Як я можу встановити ng-модель з події кліку на <li> ?

Відповіді:

Спробуй ngModel.$setViewValue:

app.directive("customSelect", [function() {
return {
restrict:"EA",
require: "?ngModel",
scope:{
choices:"=",
selected:"@"
},
link:function(scope,element, attrs,ngModel){
scope.select = function (choice){
ngModel.$setViewValue(choice);
}
},
templateUrl:"template.html",
replace:true
}
}])

Шаблон:

<div class="custom-select">
<div class="label">{{ selected }}</div>
<ul>
<li data-ng-repeat="choice in choices" data-ng-click="select(choice)">{{ choice }}</li>
</ul>
</div>

DEMO (клацніть елемент, щоб побачити вихід)