Angular factory always called twice

Question

I am calling a REST service from angular and it always calls the factory twice. Here is the factory code.

app.factory('dataFactory', ['$http', function ($http) {
    var urlBase = '/api';
    var dataFactory = {};

    dataFactory.getMyItems = function () {            
        return $http.get(urlBase + '/MyItems');
    };

    return dataFactory;
} ]);

It's called from the controller here

app.controller('MyItemsController', ['$scope', 'dataFactory',
    function ($scope, dataFactory) {            
        $scope.myItems;

        getItems();

        function getItems() {

            dataFactory.getMyItems()
                .success(function (itemsData) {
                    $scope.myItems = itemsData;
                })
                .error(function (error) {
                    $scope.status = 'Unable to load items data: ' + error.message;
                });
        }
    }
]);

This can happen if your controller is being instantiated twice. Put a console.log as first line in the controller function and see console output. — Chandermani, Mar 27 '14 at 03:38
@Chandermani The controller is being instantiated twice. I can't find where, it's only referenced once in the view with `data-ng-controller="MyItemsController"` — Heinrich, Mar 27 '14 at 04:20
Check your routeProvider config. Search for string `MyItemsController` — Chandermani, Mar 27 '14 at 04:21
@Chandermani It's in the routeProvider for that partial page. Does that instantiate it? Should I remove it from there or the partial page `data-ng-controller`? — Heinrich, Mar 27 '14 at 04:25
@Chandermani I removed it from the routeProvider and it doesn't call twice. When I removed it from the view `data-ng-controller` it still called twice. What's the proper practice? — Heinrich, Mar 27 '14 at 04:30
There is nothing like best practice here. Anywhere you put it should get called once only. Maybe something is causing the route change twice. — Chandermani, Mar 27 '14 at 04:37
Also check if you are not including `angular.js` and `` files twice in `index.html`. I once had this problem. — dopplesoldner, Mar 27 '14 at 11:10
I have `ng-controller="my-controller"` in my `body` tag. And a service method was called 4 or 5 times randomly. If I leave out `ng-controller` it is called 0 times. So this is bugging me. There is only one place ng-controller is set. — A.W., Jan 25 '16 at 11:15
My issue was that I called a service method in `ng-show="mymethod()"` This called the method multiple times. — A.W., Jan 25 '16 at 11:57

score 25 · Answer 1 · edited May 23 '17 at 12:34

I had the same problem as yours where the controller in general was called twice; hence, the factory will be called twice.

But after looking at this solution: Combating AngularJS executing controller twice

Step 1:

Make sure you are adding the service and controller in your (main layout view) only once.

Example:

index.html

  <script src="../MyItemsController.js"></script>
  <script src="../MyItemsService.js"></script>

If the problem still persists after doing step 1 go to step 2

Step 2:

There are two ways to do it:-

1. Either keep the controller in your view (ng-controller), and remove it from your config route like this:

route config (usually, app.js):

 app.config(['$routeProvider', function($routeProvider){
      $routeProvider.when('/',
               { 
                   templateUrl: 'pages/home.html'
                   //Remove controller from here
               });
}]);

home.html

 <!-- Add the ng-controller in your view -->
    <div ng-controller="MyItemsController">
        <!-- Your stuff -->
    </div>

2. Or keep the controller in your config route, and remove ng-controller from view like this:

route config (usually, app.js):

  app.config(['$routeProvider', function($routeProvider){
      $routeProvider.when('/',
               { 
                   templateUrl: 'pages/home.html',
                   controller: 'MyItemsController' //Add the controller here

               });
}]);

home.html

 <!-- Remove the ng-controller in your view -->
    <div>
        <!-- Your stuff -->
    </div>

Note: The above solution works with ui router as well.

Step 2, bless you. Switching over from a website to a web app left ng-controllers all over my views when my router was already handling that and I totally thought I had already removed them during the migration. Thank you! — Modular, Jan 20 '16 at 19:42

Angular factory always called twice

1 Answers1