<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <link href="style.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.js"></script>
</head>
 
<body>
  
  <!-- The nav bar that will be updated as we navigate -->
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
      <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
  </ion-nav-bar>  
  
  <ion-nav-view></ion-nav-view>
  
  <script id="list.html" type="text/ng-template">
    <ion-view view-title="Search The Movie Database"> 
      <ion-content>
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="search" placeholder="Search" ng-model="movie.name" ng-change="searchMovieDB()">
        </label>
        <ion-list>
          <div class="list">
  
            <a ng-repeat="movie in movies" href="#/movie/{{movie.id}}" class="item item-thumbnail-left">
              <img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" onerror="this.src = 'https://www.ginesisnatural.com/images/no_image.jpg';">
              <h2>{{movie.original_title}}</h2>
              <h4>{{movie.release_date}}</h4>
            </a>
  
          </div>
        </ion-list>
      </ion-content>
    </ion-view>    
  </script>  
  
  <script id="view.html" type="text/ng-template">
    <ion-view view-title="Movie details">   
      <ion-content>
        <div class="list card">
  
          <div class="item item-avatar">
            <img src="http://files.softicons.com/download/object-icons/movies-icons-by-pinchodesigns/png/32x32/Movie.png">
            <h2>{{movie.original_title}}</h2>
            <p>{{movie.release_date}}</p>
          </div>
  
          <div class="item item-image">
            <img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" width="200px" />
          </div>
  
          <a class="item" href="#">
              Average Vote: <strong>{{movie.vote_average}}</strong> (Votes: {{movie.vote_count}})
            </a>
  
        </div>
      </ion-content>
    </ion-view>     
  </script>   
  
</body>
 
</html>
var nameApp = angular.module('starter', ['ionic']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('list', {
      url: '/',
      templateUrl: 'list.html',
      controller: 'ListCtrl'
    })
    .state('view', {
      url: '/movie/:movieid',
      templateUrl: 'view.html',
      controller: 'ViewCtrl'
    });
 
  $urlRouterProvider.otherwise("/");
 
});

nameApp.factory('Movies', function($http) {
  var cachedData;
 
  function getData(moviename, callback) {
 
    var url = 'http://api.themoviedb.org/3/',
      mode = 'search/movie?query=',
      name = '&query=' + encodeURI(moviename),
      key = '&api_key=5fbddf6b517048e25bc3ac1bbeafb919';
 
    $http.get(url + mode + key + name).success(function(data) {
 
      cachedData = data.results;
      callback(data.results);
    });
  }
 
  return {
    list: getData,
    find: function(name, callback) {
      console.log(name);
      var movie = cachedData.filter(function(entry) {
        return entry.id == name;
      })[0];
      callback(movie);
    }
  };
 
});
 
nameApp.controller('ListCtrl', function($scope, $http, Movies) {
 
  $scope.$on('$ionicView.loaded', function(){
    console.log('View1 - loaded'); 
  }); 
  
  $scope.$on('$ionicView.enter', function(){
    console.log('View1 - enter');  
  });  
 
  $scope.$on('$ionicView.leave', function(){
     console.log('View1 - leave'); 
  });
  
  $scope.$on('$ionicView.beforeEnter', function(){
     console.log('View1 - beforeEnter'); 
  });
  
  $scope.$on('$ionicView.afterEnter', function(){
     console.log('View1 - afterEnter'); 
  });
  
  $scope.$on('$ionicView.beforeLeave', function(){
     console.log('View1 - beforeLeave'); 
  });
  
  $scope.$on('$ionicView.afterLeave', function(){
     console.log('View1 - afterLeave'); 
  });
  
  $scope.$on('$ionicView.unloaded', function(){
     console.log('View1 - unloaded'); 
  });
 
  $scope.movie = {
    name: 'Batman'
  }
 
  $scope.searchMovieDB = function() {
 
    Movies.list($scope.movie.name, function(movies) {
      $scope.movies = movies;
    });
     
  };
  
  $scope.searchMovieDB();
  
});
 
nameApp.controller('ViewCtrl', function($scope, $http, $stateParams, Movies) {
  
  $scope.$on('$ionicView.loaded', function(){
    console.log('View2 - loaded'); 
  }); 
  
  $scope.$on('$ionicView.enter', function(){
    console.log('View2 - enter');  
  });  
 
  $scope.$on('$ionicView.leave', function(){
     console.log('View2 - leave'); 
  });
  
  $scope.$on('$ionicView.beforeEnter', function(){
     console.log('View2 - beforeEnter'); 
  });
  
  $scope.$on('$ionicView.afterEnter', function(){
     console.log('View2 - afterEnter'); 
  });
  
  $scope.$on('$ionicView.beforeLeave', function(){
     console.log('View2 - beforeLeave'); 
  });
  
  $scope.$on('$ionicView.afterLeave', function(){
     console.log('View2 - afterLeave'); 
  });
  
  $scope.$on('$ionicView.unloaded', function(){
     console.log('View2 - unloaded'); 
  });  
  
  Movies.find($stateParams.movieid, function(movie) {
    $scope.movie = movie;
  });
});
.item-image {
  background: #000;
}
 
.item-image img:first-child, .item-image .list-img {
  width: 200px;
}