Experiencing issues updating the directive when the drop down list is changed using AngularJS. Below is my application code:
HTML Code
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="opt" ng-options="font.title for font in fonts" ng-change="change(opt)">
</select>
<p>
{{opt}}</p>
<br />
<h3>
Text Is
</h3>
<div id="tstDiv" testdir ct="ct">
</div>
</div>
Controller and Directive Code
angular.module("myApp", []).controller("MyCtrl", function ($scope) {
$scope.fonts = [
{ title: "Arial", text: 'Url for Arial' },
{ title: "Helvetica", text: 'Url for Helvetica' }
];
$scope.opt = $scope.fonts[0];
$scope.change = function (option) {
$scope.opt = option;
}
})
.directive("testDir", function ($timeout) {
return {
restrict: 'A',
scope: {
ct: '=ct'
},
link: function ($scope, $elm, $attr) {
document.getElementById('tstDiv').innerHTML = $scope.selectedTitle;
}
};
});
Check out the fiddle here.