Angular List Item Click

by dshilkret

HTML

<div ng-app="animalApp">
  <section ng-controller="AnimalController as animalCtrl">
    <ul ng-controller="PanelController as panel">
      <li ng-class="{ active: panel.isSelected(1)}" ng-show="panel.isSelected(1)">
        <ul>
          <li ng-repeat="cow in animalCtrl.cows">
            <h2>
          <a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2, cow)"></a>
        </h2>
          </li>
        </ul>
      </li>
      <li ng-class="{ active: panel.isSelected(2)}" ng-show="panel.isSelected(2)">
        <p>This {{panel.cow.name}} lives in {{panel.cow.country}}</p>
        <a href="" ng-click="panel.selectTab(1)">Back to all cows</a>
      </li>
    </ul>
  </section>
</div>
<script>var app = angular
            .module('animalApp', [ ])
            .controller('AnimalController', ['$http',function($http){
    var type = this;
    type.cows = [
         {"name": "Angus","country": "UK"},
         {"name": "Hereford","country": "Canada"},
         {"name": "Dwarf Lulu","country": "Nepal"},
         {"name": "Ongole","country": "India"  }
    ];
}])
  .controller("PanelController", function() {
    this.tab = 1;
    this.cow;
    this.selectTab = function(setTab, cow) {
        this.tab = setTab;
        this.cow = cow;
    };
    this.isSelected = function(checkTab) {
        return this.tab === checkTab;   
    }
});</script>