title: multiple table sort using same function angularjs
body: <p>I am a mediocre in Angularjs and need help on the same.
  I have two tables with the same headers and data in the table may or may not be different. I need to sort the data based on the click on header.
  I am using same sort function for both tables. 
  The problem is when I click  on one header the data on both the tables are getting sorted. I need only that table to be sorted whose header I click. Please help.</p>
  
  <p>Heres the code.</p>
  
  <pre><code>&lt;body ng-app="orderByExample"&gt;
    &lt;div ng-controller="ExampleController"&gt;
      &lt;pre&gt;Sorting predicate = {{predicate}}; reverse = {{reverse}}&lt;/pre&gt;
      &lt;hr/&gt;
      &lt;button ng-click="predicate=''"&gt;Set to unsorted&lt;/button&gt;
      &lt;table class="friend"&gt;
        &lt;tr&gt;
          &lt;th&gt;
            &lt;button ng-click="order('name')"&gt;Name&lt;/button&gt;
            &lt;span ng-show="predicate === 'name'" ng-class="{reverse:reverse}"&gt;&lt;/span&gt;
          &lt;/th&gt;
          &lt;th&gt;
            &lt;button ng-click="order('phone')"&gt;Phone Number&lt;/button&gt;
            &lt;span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"&gt;&lt;/span&gt;
          &lt;/th&gt;
          &lt;th&gt;
            &lt;button ng-click="order('age')"&gt;Age&lt;/button&gt;
            &lt;span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"&gt;&lt;/span&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr ng-repeat="friend in friends | orderBy:predicate:reverse"&gt;
          &lt;td&gt;{{friend.name}}&lt;/td&gt;
          &lt;td&gt;{{friend.phone}}&lt;/td&gt;
          &lt;td&gt;{{friend.age}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  
  
        &lt;table class="friend"&gt;
        &lt;tr&gt;
          &lt;th&gt;
            &lt;button ng-click="order('name')"&gt;Name&lt;/button&gt;
            &lt;span ng-show="predicate === 'name'" ng-class="{reverse:reverse}"&gt;&lt;/span&gt;
          &lt;/th&gt;
          &lt;th&gt;
            &lt;button ng-click="order('phone')"&gt;Phone Number&lt;/button&gt;
            &lt;span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"&gt;&lt;/span&gt;
          &lt;/th&gt;
          &lt;th&gt;
            &lt;button ng-click="order('age')"&gt;Age&lt;/button&gt;
            &lt;span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"&gt;&lt;/span&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr ng-repeat="friend in friends | orderBy:predicate:reverse"&gt;
          &lt;td&gt;{{friend.name}}&lt;/td&gt;
          &lt;td&gt;{{friend.phone}}&lt;/td&gt;
          &lt;td&gt;{{friend.age}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  
  (function(angular) {
    'use strict';
  angular.module('orderByExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.friends =
          [{name:'John', phone:'555-1212', age:10},
           {name:'Mary', phone:'555-9876', age:19},
           {name:'Mike', phone:'555-4321', age:21},
           {name:'Adam', phone:'555-5678', age:35},
           {name:'Julie', phone:'555-8765', age:29}];
      $scope.predicate = 'age';
      $scope.reverse = true;
      $scope.order = function(predicate) {
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.predicate = predicate;
      };
    }])
  .factory("")
  })(window.angular);
  </code></pre>