title: Change the url without reloading the controller in Angularjs
body: <p>Initially, I am showing all the users name in the table. Once the user selected any one of the name, I call the LoadData method with the selected user as the parameter. I am changing the url #/Trades/User/User1 and append the details under the User1. My requirement is 1) In the LoadData method, I want to change the url to as #/Trades/User/User1 or #/Trades/User/User2 based on the selection 2) It should update the data and reflect in view, but it should not reload the controller.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="myCtrl"&gt; 
  &lt;table&gt;
      &lt;tr ng-repeat-start="val in data.Titles" class="h" ng-click="LoadData(val.title)"&gt;
          &lt;td colspan="2" ng-hide="val.title == undefined"&gt;{{val.title}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="con in val.details"&gt;
          &lt;td&gt;{{con.portfolio}}&lt;/td&gt;
          &lt;td&gt;{{con.status}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat-end&gt;
          &lt;td colspan="2"&gt;Load More&lt;/td&gt;
      &lt;/tr&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Code</strong></p>
  
  <pre><code>angular.module("myApp", [])
      .controller("myCtrl", ["$scope", function ($scope) {
  
          $scope.data = {"Titles":[{title:"User 1",    
              details: [{portfolio: "Microsoft", status:"Active"},{portfolio:"IBM", status:"Inactive"}]
      }, {title:"User 2",
          details: [{portfolio: "Yahoo", status:"Inactive"},{portfolio: "Google", status:"Active"}]
      }]};
  
  $scope.LoadData = function(id) {
      Change the url as #/Trades/Author/User1
      Load the details of the User1
  };
      });
  </code></pre>