My directive is not updating the <select> element itself when the ng-model scope variable is changed, but it does update when I change the scope variable bound to it. I believe I may need to register a $watch in the link function, but I'm uncertain. Any assistance would be appreciated.
template.html
<div ng-repeat="searchField in searchFields">
<select-search-field label="{{searchField.label}}" field="$parent[searchField.field]"></select-search-field>
</div>
resulting html
<div>
<label>Landing Gear</label><br>
<select ng-model="gear">
<option value="">Any</option>
<option value="fixed">Fixed</option>
<option value="retractable">Retractable</option>
</select>
</div>
controller.js
$scope.searchFields = [{
label: 'Landing Gear',
field: 'gear'
}];
$scope.gear = ''; //This value is passed to the directive in the "field" property ($parent[] part)
directive.js
.directive('selectSearchField',function() {
function template() {
return '<label>{{label}}</label><br>' +
'<select ng-model="field">' +
'<option value="">Any</option>' +
'<option value="fixed">Fixed</option>' +
'<option value="retractable">Retractable</option>' +
'</select>';
}
return {
restrict: 'E',
scope: {
label: '@',
field: '=',
options: '='
},
template: template()
};
});
Edit: Here are the files on github: https://github.com/andypandy/littleplanefinder (refer to public/js/controllers.js and public/js/directives.js)
Also: view it live at