title: Change ng-repeat value in html using javascript or angularJS
body: <p>When the user click on 'sort by book title' button, I would like to change "ng-repeat="x in books' to  ng-repeat="x in books|orderBy:'country'" in HTML. </p>
  
  <p>How can I create that action in javascript/angular?</p>
  
  <p><a href="https://jsfiddle.net/dbxtcw9w/" rel="nofollow">https://jsfiddle.net/dbxtcw9w/</a></p>
  
  <pre><code>&lt;section id="App2" ng-app="form-input" ng-controller="ctrl"&gt;
    &lt;summary class="row book-component"&gt;
       &lt;div  ng-repeat='x in books' class="col-md-12 col-sm-12 col-xs-12" &gt;
         &lt;img class="thumbnail-image" &gt; 
           &lt;div&gt; 
              &lt;h2 ng-bind="x.title" class="title"&gt;&lt;/h2&gt;
              &lt;h4 ng-bind="x.author" class="author" style="color:grey;"&gt;&lt;/h4&gt;
              &lt;hr&gt;
              &lt;h5&gt;FREE SAMPLE &lt;span class="review" onclick="review(this)"&gt;REVIEW&lt;/span&gt;&lt;/h5&gt;
           &lt;/div&gt; 
       &lt;/div&gt;
    &lt;/summary&gt; 
    &lt;button style="margin-top:30px" class="btn-lg btn-success" 
    ng-click="sort()" onclick="sort()"&gt;Sort by book title&lt;/button&gt;
  &lt;/section&gt;
  &lt;script&gt;
    var app2 = angular.module('form-input', []);
      app2.controller('ctrl', function($scope) { 
      $scope.books=[
        {title:'Jani',author:'Norway'},
        {title:'Hege',author:'Sweden'}
      ];       
    })
  &lt;/script&gt;
  </code></pre>