title: How to handle smooth navigation using angular ui-router
body: <p>I am new to angular and creating a small project using angular ui-router. After going to documents, I have created the sample flow. But I got stuck in passing the json value to the template.</p>
  
  <ul>
  <li>I am unable to paint the json on the page, if i add the normal string in my html then it is coming fine, this is happening once i navigate from one screen to another screen.</li>
  <li>Unable to navigate to the back on click of back button.</li>
  </ul>
  
  <p>This is what I tried:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Angular Demo&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"&gt;&lt;/script&gt;
       &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-app="myApp" ng-controller="appController"&gt;
  
  &lt;div class="container" ui-view&gt;
      &lt;div id="div1"&gt;
    &lt;ul&gt;
          &lt;li ng-repeat="x in data"&gt;&lt;a ui-sref="test"&gt;{{ x.id }}&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="controller.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/e5vMRbju479bqDr6mQPQ?p=preview" rel="nofollow">Demo - Plunker</a></p>