title: Pass variable onto Ionic Framework page (based on AngularJS)
body: <p>I have a set of tabs in Ionic framework which show a list of movies:</p>
  
  <pre><code>&lt;script id="tabs.html" type="text/ng-template"&gt;
    &lt;ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive"&gt;
      &lt;ion-tab title="Movies" icon="ion-film-marker" href="#/tab/movies"&gt;
        &lt;ion-nav-view name="movies-tab"&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
    &lt;/ion-tabs&gt;
  &lt;/script&gt;
  
  &lt;script id="movies.html" type="text/ng-template"&gt;
    &lt;ion-view title="'Movies'"&gt;
      &lt;ion-content has-header="true" padding="false"&gt;
        &lt;div class="list"&gt;
          &lt;a ng-repeat="item in movies" href="#/tab/movies/{{item.id}}" class="item item-thumbnail-left item-text-wrap"&gt;
            &lt;img ng-src="{{ item.image }}"&gt;
            &lt;h2&gt;{{ item.title }}&lt;/h2&gt;
            &lt;h4&gt;{{ item.desc }}&lt;/h4&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/ion-content&gt;
    &lt;/ion-view&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Each of the items in the list is linked to <code>#/tab/movies/{{item.id}}</code>, for example, <code>#/tab/movies/27</code>. My movies are defined in the controler</p>
  
  <pre><code>.controller('MyCtrl', function($scope) {    
    $scope.movies = [
      { id: 1, title: '12 Rounds', desc: 'Detective Danny Fisher discovers his girlfriend has been kidnapped by a ex-con tied to Fisher\'s past, and he\'ll have to successfully complete 12 challenges in order to secure her safe release.', image: ''}
    ];
  </code></pre>
  
  <p>My pages are routed as below:</p>
  
  <pre><code>.config(function($stateProvider, $urlRouterProvider) {
  
    $stateProvider
      .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "tabs.html"
      })
      .state('tabs.movies', {
        url: "/movies",
        views: {
          'movies-tab': {
            templateUrl: "movies.html",
            controller: 'MyCtrl'
          }
        }
      })
  
     $urlRouterProvider.otherwise("/tab/movies");
  
  })
  </code></pre>
  
  <p>What I need to do now is when each item on the above list is clicked, it takes it to it's own page, <code>#/tab/movies/{{item.id}}</code>, where I can display things like <code>item.title</code> or <code>item.image</code>, along with a back button to go to the list.</p>
  
  <p>In order to do this, from what I can tell, I need to create a blank <code>ng-template</code> with a placeholder for the information, and then some how pass this information to it when clicked, but I'm not sure how to do this.</p>