javascript - Reusable select's behaviour in angular while charging its options via ajax -

i know maybe general question know how make reusable select (or input) when wating options (by ajax request) shows 'charging ...' message selected option.

so example in of views can use directive called 'ajax-charged' , every select directive have behaviour.

the html imagine while charging:

<select ng-options="opt in options" ajax-charged> <option>charging ... </option> </select> 

the charged html:

<select ng-options="opt in options" ajax-charged> <option>opt1</option> <option>opt2</option> <option>etc</option> </select> 

i thought in changing options array 'charging ...' item, how reusable? other approach welcomed!

your directive need know array it's watching. can pass directive, , have the directive watch array.

i created fiddle showing in action: http://jsfiddle.net/tmvfn/1/

html:

  </select>   <select ng-model="selecteda" ng-options="opta opta in optionsa" ajax-charged="optionsa">    </select>  {{selecteda}}, {{selectedb}} </div> 

js:

var myapp = angular.module('myapp',[]);  //myapp.directive('mydirective', function() {}); //myapp.factory('myservice', function() {});  function myctrl($scope, $timeout) {     $timeout(function(){         $scope.optionsa = ['opt1', 'opt2', 'etc'];         $scope.optionsb = ['opt4', 'opt5'];     }, 3000);     $scope.optionsb = ['opt3'];     $scope.selectedb = 'opt3'; };  myapp.directive('ajaxcharged', function() {     return {         restrict: 'a',         require: 'ngmodel',         link: function($scope, elm, attrs, ngmodel) {                         $scope.$watch(attrs.ajaxcharged, function(newval, oldval) {                 console.log(newval);                 if (typeof(newval) === 'undefined' ||                     typeof(newval.length) === 'undefined' ||                      newval.length === 0) {                     $scope[attrs.ajaxcharged] = ['charging...'];                 } else if (newval !== oldval && newval.length > 0) {                     ngmodel.$setviewvalue(newval[0]);                 }             }, true);         }     }; });