I'm having an issue with my custom directive in Angular JS. I've created a function inside the controller that I want to call on an ng-change event from a text box, but for some reason, the function isn't getting called. Here's the code snippet:
<script>
var delightMeterApp = angular.module('delightMeterApp', []);
delightMeterApp.directive('delightMeter', function () {
return {
scope: true,
restrict: 'E',
template: '<div id="delightmeter"></div>',
link: function (scope, element) {
// Code for creating the custom meter goes here
},
controller: "delightMeterController"
};
});
delightMeterApp.controller('delightMeterController', function ($scope) {
$scope.fun = function () {
alert("called");
}
});
</script>
Here is the relevant HTML:
<div ng-app="delightMeterApp" ng-controller="delightMeterController">
<delight-meter ng-model="delightScore"></delight-meter>
<input id="Text1" type="text" ng-change="fun()" />
</div>
I'm unsure if it's correct to use the same controller for both the custom directive and the input control. Can someone point out what mistake I might be making here?