Изменение директивы angularjs ng-model

Question

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

.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 
     } 
}]) 

Как установить нг-модель от события щелчка на <li>?

Answer 1

Попробуйте 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 (нажмите на элемент, чтобы увидеть выход)