AngularJS - Using $resource -- Why are there so many entries in my console log?

Question

I am new to AngularJS and working with $resource. I am writing out log statements to my console and am confused because I see multiple entries.

My HTML looks like this:

    <div ng-controller="ctrl1">

        <!-- Brand List -->
        <ul  style="background-color: red;">
            <li ng-repeat="brand in myData.brandList">
                {{brand}}
            </li>
        </ul>

        <!-- Get Brand -->
        <div ng-controller="ctrl1" style="background-color: orange;">
            {{myData.brand}}
        </div>

        <button ng-controller="ctrl1" ng-click="deleteBrand('apple')">delete</button>

    </div>

</div>

And my js looks like this:

    var app = angular.module('myApp', ['ngResource', 'myAppControllers', 'myAppServices']);

    var services = angular
        .module('myAppServices', [])
        .factory('api', function ($resource) {
            return $resource('/api/Brand/:id',
                { id: '@id' }
            );
        });

    var controllers = angular
        .module('myAppControllers', [])
        .controller('ctrl1', [
            '$scope', 'api', function ($scope, api) {
                $scope.myData = {
                    brandList: [],
                    brand: {},
                };

                $scope.setBrandList = function () {
                    console.log("setBrandList");
                    api.query().$promise.then(function (response) {
                        console.log("setBrandList - success");
                        $scope.myData.brandList = response;
                    },
                        function (errResponse) {
                            console.log("setBrandList - error");
                        });
                };

                $scope.setBrand = function () {
                    console.log("setBrand");
                    api.get({ id: "minolta" }).$promise.then(function (response) {
                        console.log("setBrand - success");
                        $scope.myData.brand = response;
                    },
                        function (errResponse) {
                            console.log("setBrand - error");
                        });
                };

                $scope.deleteBrand = function (id) {
                    console.log("deleteBrand (" + id + ")");
                    api.delete({ id: id }).$promise.then(function (response) {
                        console.log("deleteBrand - success");
                        $scope.setBrandList();
                    },
                        function (errResponse) {
                            console.log("deleteBrand - error");
                        });
                };

                $scope.setBrand();
                $scope.setBrandList();
            }
        ]);

</script>

When I am running this simple example, I see three calls / responses to setBrand and setBrandList. (See attached image)

Am I simply misunderstanding something? Or am I defining something improperly? My belief would be that setBrand and setBrandList would only be called once each.

Thanks in advance.

Answer 1

That's because you are defining your controller 3 times in your template. You just need the ng-controller directive in your first div.