angularjs restricting count to current scope

Question

I am tring to setup a counter where for each country in my list I can keep count of how many clicks there has been plus an overall tally.

I have the below so far which can be viewd in this fiddle. The issue I am having is that I am not able to keep the count unique for each country. How can this be achieved?

    <div ng-app="myApp">
    <div data-ng-view></div>
    </div>

    'use strict';
    var myApp = angular.module('myApp', ['ngRoute', 'templates/view1.html', 'templates/view2.html']);

    myApp.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'templates/view1.html',
                controller: 'CountryListCtrl'
            })
            .when('/:id', {
                templateUrl: 'templates/view2.html',
                controller: 'CountryCtrl'
            })
    }]);

    myApp.factory('Countries', ['$q', function ($q) {
        var countriesList = [];    
        // perform the ajax call (this is a mock)
        var getCountriesList = function () {
            // Mock return json
            var contriesListMock = [
                {
                    "id": "0",
                        "name": "portugal",
                        "abbrev": "pt"
                }, {
                    "id": "1",
                        "name": "spain",
                        "abbrev": "esp"
                }, {
                    "id": "2",
                        "name": "angola",
                        "abbrev": "an"
                }
            ];
            var deferred = $q.defer();
            if (countriesList.length == 0) {
                setTimeout(function () {
                    deferred.resolve(contriesListMock, 200, '');
                    countriesList = contriesListMock;
                }, 1000);
            } else {
                deferred.resolve(countriesList, 200, '');
            }
            return deferred.promise;
        }

        var getCountry = function(id) {
            var deferred = $q.defer();
            if (countriesList.length == 0) {
                getCountriesList().then(
                    function() {
                        deferred.resolve(countriesList[id], 200, '');
                    },
                    function() {
                        deferred.reject('failed to load countries', 400, '');
                    }
                );
            } else {
                deferred.resolve(countriesList[id], 200, '');
            }
            return deferred.promise;
        }

        var cnt      = 0;
        var cntryCnt = 0;    

        var incCount = function() {
               cnt++;
               return cnt;        
        }

        var incCntryCount = function(id) {
               cntryCnt++;
               return cntryCnt;        
        }

        return {
            getList: getCountriesList,
            getCountry: getCountry,
            getCount : function () {
                return cnt;
            },
            getCntryCount : function () {
                return cntryCnt;
            },        
            incCount: incCount,
            incCntryCount: incCntryCount      
        };
    }]);

    myApp.controller('CountryListCtrl', ['$scope', 'Countries', function ($scope, Countries) {
        $scope.title = '';
        $scope.countries = [];
        $scope.status = '';

        Countries.getList().then(
            function (data, status, headers) { //success
                $scope.countries = data;
            },
            function (data, status, headers) { //error
                $scope.status = 'Unable to load data:';
            }
        );
    }]);

    myApp.controller('CountryCtrl', ['$scope', '$routeParams', 'Countries', function ($scope, $routeParams, Countries) {
        $scope.country = {
            id: '',
            name: '',
            abbrev: ''
        };
        var id = $routeParams.id;

        Countries.getCountry(id).then(
            function(data, status, hd) {
                console.log(data);
                $scope.country = data;
                $scope.countOverall = Countries.getCount;
                $scope.countCntry = Countries.getCntryCount;
                $scope.clickCnt = function () {
                    $scope.countTotal = Countries.incCount();
                    $scope.country.clicks = Countries.incCntryCount(id);
                    console.log($scope);
                };  
            },
            function(data, status, hd) {
                console.log(data);
            }
        );   

    }]);


    angular.module('templates/view1.html', []).run(["$templateCache", function ($templateCache) {
        var tpl = '<h1>{{ title }}</h1><ul><li ng-repeat="country in countries"><a href="#{{country.id}}">{{country.name}}</div></li></ul>';
        $templateCache.put('templates/view1.html', tpl);
    }]);

    angular.module('templates/view2.html', []).run(["$templateCache", function ($templateCache) {
        var tpl = '<div>{{country.name}} clicks {{countCntry()}} <br> overall clicks {{countOverall()}}</div><button><a href="#">BACK</a></button><button ng-click="clickCnt()" >count clicks ++ </button>';
        $templateCache.put('templates/view2.html', tpl);
    }]);

Answer 1

The problem is that you are not incrementing a count based on the country. Working on the fiddle right now.

EDIT:

I've updated the fiddle: http://jsfiddle.net/1xtc0zhu/2/

What I basically did was making the cntryCnt an object literal which takes the country id as a property and keeps the right counting per each id, like so:'

var cnt      = 0;
var cntryCnt = {};

...

// The function now receives the country id and increments the specific country clicks only.
var incCntryCount = function(id) {
       cntryCnt[id] = cntryCnt[id] || 0;
       cntryCnt[id]++;
       return cntryCnt[id];        
}

The rest of the changes are in the templates, and are basically only sending the country id as a param when getting or incrementing the counts.

Also, this is not an Angular Specific question, but more a programming in general question.