Ionic Framework side menu pattern example

<!DOCTYPE html>
<html ng-app="myApp">

<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="index.css" rel="stylesheet" />
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="HomeCtrl">

  <ion-side-menus>

    <ion-pane ion-side-menu-content>
      <ion-nav-bar class="bar-balanced nav-title-slide-ios7">
        <ion-nav-buttons side="left">
          <button class="button button-positive button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left">
      <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>

      <ion-content has-header="true">

        <div class="list">


          <ion-radio ng-model="selected.score" ng-value="{{sort.score}}" ng-repeat="sort in sorting">{{sort.name}}</ion-radio>

        </div>

      </ion-content>
    </ion-side-menu>

  </ion-side-menus>

  <script id="home.html" type="text/ng-template">
    <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Search The Movie Database</h1>
    </ion-header-bar>
    <ion-content>
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="selected.movieName" ng-change="searchMovieDB()">
      </label>
      <ion-list>
        <div class="list">

          <a ng-repeat="movie in movies  | filter: greaterThan('vote_average')" 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><strong>{{movie.original_title}}</strong></h2>
            <h4>Release Date: <strong>{{movie.release_date}}</strong></h4>
            <h4>Content <strong>{{movie.vote_average}}</strong></h4>

            <h6>Rating<h6>
                
              
            </a>
  
          </div>
        </ion-list>
      </ion-content>
       <ion-footer-bar class="bar">
       <div class="title">
       <div class="fixed-outside">
     <div class="row">
        <div class="col">
            <a href="#/search.html"><span class="ion-search" ></spna></a>
        </div>
        <div class="col">
        <a href="#/upload.html"><span class="ion-ios-upload" ></spna></a>
            
        </div>
        <div class="col">
        <a href="#/logout.html"><span class="ion-log-out" ></spna></a>
            
        </div>
    </div>
</div>
</div>
         
          
           
           
     </ion-footer-bar>
    </script>

	</body>
</html>

var app = angular.module('myApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'home.html'
    })  
    .state('search',{
      url:'/search',
      templateUrl:'search.html'
      
    });
  $urlRouterProvider.otherwise('/');
});

app.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);
    }
  };
 
});

app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, Movies) {
  
  setInterval(function(){ 
    console.log($ionicSideMenuDelegate.isOpen()); 
  }, 1000);  
  
   $scope.tags = [
                  { text: 'c++' },
                  { text: 'Data-structure' },
                  { text: 'Oracle' },
                  { text: 'Reference' }
    ];
    
  $scope.sorting = [{score: 9, name : 'Score more then 9'}, 
                    {score: 8, name : 'Score more then 8'}, 
                    {score: 7, name : 'Score more then 7'}, 
                    {score: 6, name : 'Score more then 6'}, 
                    {score: 5, name : 'Score more then 5'}, 
                    {score: 4, name : 'Score more then 4'}, 
                    {score: 3, name : 'Score more then 3'}, 
                    {score: 2, name : 'Score more then 2'}, 
                    {score: 1, name : 'Score more then 1'},                     
                    {score: 0, name : 'Show me every movie'}];  
                    
  $scope.selected = {
    score : 0,
    movieName : 'Batman'
  }
                    
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };
  
  $scope.greaterThan = function(fieldName){
      return function(item){
        return item[fieldName] > $scope.selected.score;
      }
  }  
  
  $scope.searchMovieDB = function() {
 
    Movies.list($scope.selected.movieName, function(movies) {
      $scope.movies = movies;
    });
     
  };
  
  $scope.searchMovieDB(); 
});

.bar.bar-header {
  background: rgba(255,255,255,.10);
  border-bottom-width: 0;
}

.bar.bar-header h1 {
  color: black !important;
}


.scroll-content {
  overflow: visible !important;
}

/*.platform-ios.platform-cordova:not(.fullscreen) .has-header {
  top:0px;
}*/

test