Pass variable onto Ionic Framework page (based on AngularJS)

I have a set of tabs in Ionic framework which show a list of movies:

<script id="tabs.html" type="text/ng-template">
  <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
    <ion-tab title="Movies" icon="ion-film-marker" href="#/tab/movies">
      <ion-nav-view name="movies-tab"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</script>

<script id="movies.html" type="text/ng-template">
  <ion-view title="'Movies'">
    <ion-content has-header="true" padding="false">
      <div class="list">
        <a ng-repeat="item in movies" href="#/tab/movies/{{item.id}}" class="item item-thumbnail-left item-text-wrap">
          <img ng-src="{{ item.image }}">
          <h2>{{ item.title }}</h2>
          <h4>{{ item.desc }}</h4>
        </a>
      </div>
    </ion-content>
  </ion-view>
</script>

Each of the items in the list is linked to #/tab/movies/{{item.id}}, for example, #/tab/movies/27. My movies are defined in the controler

.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: ''}
  ];

My pages are routed as below:

.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");

})

What I need to do now is when each item on the above list is clicked, it takes it to it's own page, #/tab/movies/{{item.id}}, where I can display things like item.title or item.image, along with a back button to go to the list.

In order to do this, from what I can tell, I need to create a blank ng-template 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.

What are you looking for is probably service/factory where you can store list of movies and then retrieve full list for MyCtrl or just a single movie object for movie page.

angular.module('myAppName')
.factory('MovieService', function () {
    return {
        MoviesList: [
            {movie object}
        ],
        GetAllMovies: function () {
            return this.MoviesList;
        },
        GetMovieById: function (id) {
            //iterate MoviesList and return proper movie
        }
    }
}

that service can be then injected into your controllers

.controller('MyCtrl', function($scope, MoviesService) {    
    $scope.movies = MoviesService.GetAllMovies();
}

and same goes for a movie view controller:

.controller('ShowMyMovie', function($scope, MoviesService) {    
    $scope.movie = MoviesService.GetMovieById(//retrieve_id_from_routing_service);
}

then in template for this view you can simply use {{movie.title}} to display informations

In your stateProvider config, you need to add a placeholderFor for the movie id, something like:

.state('tabs.movies', {
  url: "/movies/:id",
  views: {
    'movies-tab': {
      templateUrl: "movies.html",
      controller: 'MyCtrl'
    }
  }
})

see https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service