AngularJS working with ng change in isolated scope directive - transition to component architecture

Question

I am currently struggling to include ng-change with an isolated area in my directive. I am trying to move from an ng controller to a component-based architecture, but this turned out to be more complicated than expected.

Here is a fiddle that I can’t work with. fiddle

I'm sure the problem is here somewhere here

app.directive("search", function(service) {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        controller: ['$scope', function($scope) {
            $scope.search = function(keyword) {
                service.searchData(keyword);
            };
        }],
        template: '<div style="padding-bottom: 15px;">' +
                            '<center>' +
                '<input type="text" ng-model="keyword" ng-change="search(keyword)"/>' +
               '</center>' +
                            '</div>'
    };
});

But the violin will give a more complete picture of what I'm trying to accomplish.

Answer 1

Chnage controllers as below

controller: searchCtrl

write the code below outside the directive

 searchCtrl.$inject = ['$scope', 'service'];
 function searchCtrl($scope, service) {
    $scope.search = function(keyword) {
       alert("called - " + keyword);
       service.searchData(keyword);
    };
}

Answer 2

Charan Cherry , angular, angular requireJS , , .

ng-change , ng-, , .

, -.