Calling angular JS from outside controller

Question

My angular app code:

(function() {

     var app = angular.module('checkout', []);  
     app.controller('TabController', function(){
         this.tab2Done=0;
         this.setTab2Done= function(newValue){
              this.tab2Done = newValue;
         };
     });
})();

I want to call tab2Done from the JavaScript function(function name call). I found a solution on the internet and I tried that method but it's not working. This is the method that I tried:

The div which have has ng-controller="TabController" has id="yourControllerElementID"

This is my javascript function:

function call(){   
    alert();
    e=$('#yourControllerElementID');
    scope=angular.element(e).scope();  
    scope.$apply(function(){
        scope.setTab2Done(1);
    });
}

but I got an error:

at Scope.$eval at Scope.$apply

What have I done wrong?

Per Hornshøj-Schierbeck · Accepted Answer · 2014-07-09T09:57:26.487

1

I think you problem is that the method you are trying to call is NOT in your scope. It looks like you are using the "Controller as" syntax, judging by the fact that you are setting the method on "this" in the controller.

You could provide a plunker to your example, but let me try to fix your problem with this code:

function call(){   
  var element = angular.element('#yourControllerElementID');
  var controller = element.controller();
  var scope = element.scope();  
  scope.$apply(function(){
    controller.setTab2Done(1);
  });
}

edited Jul 09 '14 at 09:57

answered Jul 09 '14 at 09:38

Per Hornshøj-Schierbeck

15,097
21
80
101

I agree with [this](http://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification). I missed the update. Thank you Schierbeck – DineshKP Jul 09 '14 at 10:05

score 0 · Answer 2 · answered Jul 09 '14 at 09:32

Not sure what you are asking but your code looks weird, try this! Maybe this might give you a clue :)

angular.module('checkout', []).
  controller('TabController', ['$scope', function ($scope) {
         $scope.tab2Done=0;


         var setTab2Done = function(newValue){
              $scope.tab2Done = newValue;
          }

         //to call the function through the scope
         // e.g. from your html <a href='javascript:void(0)' ng-click='call()'></a>
         $scope.call = function(){
             setTab2Done(1);
        }

        //call the function directly on this script
        setTab2Done(1);
     });

Calling angular JS from outside controller

2 Answers2