var appOne = angular.module('appOne', ['ngRoute']);

appOne.config(function($routeProvider) {
  $routeProvider.
    when('/', {
      templateUrl: 'app/one/country-list.html',
      controller: 'CountryListController'
    }).
    when('/:countryName', {
      templateUrl: 'app/one/country-detail.html',
      controller: 'CountryDetailController'
    }).
    otherwise({
      redirectTo: '/'
    });
});

appOne.factory('getCountries', function($http) {

  var cacheData;

  function getData(callback) {
    $http({
      method: 'GET',
      url: 'assets/files/country.json',
      cache: true
    }).success(callback);
  }
  // alt
  // function getData(callback) {
  //   if (cacheData) {
  //     callback(cacheData);
  //   } else {
  //     $http.get('assets/country.json').success(function(data) {
  //       cacheData = data;
  //       callback(data);
  //     });
  //   }
  // }

  return {
    list: getData,
    find: function(name, callback) {
      getData(function(data) {
        var country = data.filter(function(entry) {
          return entry.name === name;
        })[0];
        callback(country);
      });
    }
  };
  // return {
  //   list: function(callback) {
  //     $http.get('assets/files/country.json').success(callback);
  //   },
  //   find: function(name, callback) {
  //     $http.get('assets/files/country.json').success(function(data) {
  //       var country = data.filter(function(entry) {
  //         return entry.name === name;
  //       })[0];
  //       callback(country);
  //     });
  //   }
  // };
});

appOne.controller('CountryListController', function($scope, $http, getCountries) {
  getCountries.list(function(countries) {
    $scope.countries = countries;
  });
});

appOne.controller('CountryDetailController', function($scope, $routeParams, getCountries) {
  $scope.name = $routeParams.countryName;

  getCountries.find($scope.name, function(country) {
    $scope.country = country;
  });

  // $http.get('assets/country.json').success(function(data) {
  //   $scope.country = data.filter(function(entry) {
  //     return entry.name === $scope.name;
  //   })[0];
  //   console.log($scope.country);
  // });
});

appOne.filter('encodeURI', function() {
  return window.encodeURI;
});


// appOne.controller('CountryCtrl', ['$scope', '$http', function(scope, http) {
//   http.get('assets/country.json').success(function(data) {
//     scope.countries = data;
//     scope.sortField = 'population';
//     scope.reverse = true;
//   });
// }]);

<div>search:
  <input type="text" ng-model="query">
</div>
<div>sort:
  <a href="" ng-click="sortField='name';reverse=!reverse">country</a> | <a href="" ng-click="sortField='population';reverse=!reverse">population</a>
</div>
<ul>
  <li ng-repeat="country in countries"><a href="#/"></a></li>
</ul>
<table>
  <tr>
    <th ng-click="sortField='name';reverse=!reverse">Country</th>
    <th ng-click="sortField='population';reverse=!reverse">Population</th>
    <th>Flag</th>
    <th ng-click="sortField='capital';reverse=!reverse">Capital</th>
    <th ng-click="sortField='-gdp';reverse=!reverse">GDP</th>
  </tr>
  <tr ng-repeat="country in countries | filter:query | orderBy:sortField:reverse">
    <td></td>
    <td></td>
    <td><img ng-src="" width="100"></td>
    <td></td>
    <td></td>
  </tr>
</table>