$state.go not working - Error : $state isnot defined

Hi im Very new Angulay js Ionic development. im trying to basic navigation when button is clicked. but im getting this error when i click the button in Firebug console . i want to navigate to the search page after it clicked

Error : $state isnot defined

Here my App.js Code

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('signin', {
    url: "/sign-in",
    templateUrl: "templates/sign-in.html",
    controller: 'AppCtrl'
  })

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: "/search",
    views: {
      'menuContent': {
        templateUrl: "templates/search.html"
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/sign-in');
});

here my Controller

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicPopup, $timeout, $ionicModal) {


  $scope.signIn = function(user) {
    //console.log('Sign-In', user);
    $state.go('app.search');
  };



})

My HTML button is

<button class="button button-block button-positive" id="login-btn" ng-click="signIn(user)" type="submit">Log in</button>

You should also get in the habit of properly injecting your dependencies. It should look like this (including the $state injection):

.controller('AppCtrl',['$scope', '$ionicPopup', '$timeout', '$ionicModal', '$state', function($scope, $ionicPopup, $timeout, $ionicModal, $state) {
  $scope.signIn = function(user) {
    //console.log('Sign-In', user);
    $state.go('app.search');
  };
}])

Just make sure the order of injections in the quotes are in the same order as the order of your parameters in the following function.