Angular don't load the template

My angular (ionic) application don't load my template when I click on a link. So if I click on the link, the url in my address bar change, but the template don't. I stay on my homepage. If I put the url myself in the address bar and click ENTER, my template load.

  <ion-side-menus ng-controller="HomeCtrl">
      <ion-side-menu-content>
          <ion-header-bar class="bar-positive">
              <button class="button button-icon ion-navicon" ng-click="toggleLeft()" ng-hide="$exposeAside.active"></button>
              <h1 class="title">Home</h1>
          </ion-header-bar>
          <ion-content>

              <ion-list class="feed">

                  <ion-item class="item">
                      Click <a href="#/friends">Here</a> to go on Friends
                  </ion-item>
                  <ion-item class="item">
                      Click <a href="#/notification">Here</a> to go on Notification
                  </ion-item>

              </ion-list>

          </ion-content>
      </ion-side-menu-content>
      <ion-side-menu expose-aside-when="large" class="panel-menu-left">
          <ion-content>
              <div ng-include src="'menu.html'"></div>
          </ion-content>
      </ion-side-menu>
      <div ng-include src="'tabs.html'"></div>
  </ion-side-menus>

I created a Plunker : http://plnkr.co/edit/IFHpZF4MOOrRYciLTjAs?p=info

http://run.plnkr.co/owTNxkDqZwhK4QHv/#/

If you click on notification the url change but not the page. If you go direclty on http://run.plnkr.co/owTNxkDqZwhK4QHv/#/notification the page load.

What I did wrong ?

<div class="tabs tabs-icon-only">

 <a ui-sref=“notification" class="tab-item notifications">
  <div class="flag"></div>
  <i class="icon ion-ios-bell-outline"></i>
 </a>
//other items
</div>

Check the part of the answer in the question: Angular-ui-router: ui-sref-active and nested states

(For this to work, $state should be available in view.)

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);)

I don't know ionic but I think your folder structure is not correct. If I add a simple inline template your plunkr is working. For example:

.state('friends', {
     url: '/friends',
     template: '<p>Hello, world!</p>',
     controller: 'FriendsCtrl',
 });

I read something about ionic folder structure here and here. It seems that the templates has to be in a special directory:

From the first link:

PROJECT

  • hooks
  • platforms
  • www
    • templates/

From the second link:

"The template we will use is found in www/templates/user.html in our project."

EDIT:

If the template folder is ok, I think you have answered the question yourself: Your template is wrong. As I already stated, I don't know ionic but something like this works (Homepage and Friends - Notification still broken). Essentially it seems that you have to start a template with something like ion-view like this: 

<ion-view ng-controller="YourController">
    <ion-content>
...

The above plunkr is not very pretty but it states the point and enforces my previous made comment. Do refactor the code to get rid of the menu and put it in a central place - in my plunkr just in the index.html.

Concerning templates and structure I just found this here:

A view [template] is where the markup for state, or page, of your app lives. In Ionic, these files tend to look something like this:

<ion-view title="About">
  <ion-content>
    My super cool content here!
  </ion-content>
</ion-view>

Here is the solution.

Structure:

www/
    templates/
        menu.html
        hompage.html
        notification.html
        ...
    index.html

app.js:

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
app = angular.module('starter', ['ionic'])

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});

app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.views.transition('none'); //remove this if you want a slide annimation each time you change state
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html"
        })
        .state('app.homepage', {
            url: "/homepage",
                views: {
                'menuContent' :{
                    templateUrl: "templates/homepage.html",
                    controller: "HomeCtrl"
                }
            }
        })
        .state('app.notification', {
            url: "/notification",
                views: {
                'menuContent' :{
                    templateUrl: "templates/notification.html",
                    controller: "NotificationCtrl"
                }
            }
        })
        .state('login', {
            url: "/login",
            templateUrl: "templates/login.html",
            controller: "LoginCtrl"
        })
        .state('app.friends', {
            url: "/friends",
                views: {
                'menuContent' :{
                    templateUrl: "templates/friends.html",
                    controller: "FriendsCtrl"
                }
            }
        })
    ;
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/homepage');
});

app.controller('AppCtrl', function($scope, $ionicSideMenuDelegate, $state) {
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
    };
});

app.controller('HomeCtrl', function($scope) {
    console.log("HOME");
});

app.controller('NotificationCtrl', function($scope) {
    console.log("NOTIFICATION");
});

app.controller('FriendsCtrl', function($scope) {
    console.log("FRIENDS");
});

app.controller('LoginCtrl', function($scope, $state) {
    console.log("LOGIN");
    $scope.credentials = {
        username: 'hotgeart',
        password: '123456'
    };
    $scope.submit = function (credentials) {
        alert('Login: '+ $scope.credentials.username +'\nPassword: '+$scope.credentials.password);
        $state.go('app.homepage');
    };
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Test</title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter" ng-controller="AppCtrl">
        <ion-nav-view></ion-nav-view>
    </body>
</html>

menu.html (the parent)

<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view> <!- THE CONTENT LOAD HERE -->
    </ion-side-menu-content> 
    <ion-side-menu side="left">
        <ion-content>
            <ion-list class="panel-menu-left">
                <ion-item class="item" href="#/login">
                    Login
                </ion-item>
                <ion-item class="item" href="#/app/homepage">
                    Homepage
                </ion-item>
                <ion-item class="item" href="#/app/notification">
                    Notification
                </ion-item>
                <ion-item class="item" href="#/app/friends">
                    Friends
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
    <div class="tabs tabs-icon-only">
        <div class="border"></div>
        <a href="#/app/friends" class="tab-item friends">
            <div class="flag"></div>
            <i class="icon ion-ios-people-outline"></i>
        </a>
        <a href="#/app/notification" class="tab-item notifications">
            <div class="flag"></div>
            <i class="icon ion-ios-bell-outline"></i>
        </a>
        <a href="#/app/friends" class="tab-item visitors">
            <div class="flag"></div>
            <i class="icon ion-ios-eye-outline"></i>
        </a>
    </div>
</ion-side-menus>

Example of a template (notification.html, friends.html and homepage are the same only the text change)

<ion-view view-title="Home">
    <ion-content>
        <ion-list class="feed">
            <ion-item class="item">
                Click <a href="#/app/friends">Here</a> to go on Friends
            </ion-item>
            <ion-item class="item">
                Click <a href="#/app/notification">Here</a> to go on Notification
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

login.html (external page testing)

<ion-content class="padding">
    <h1>External page (without menu)</h1>  
    <form role="form" ng-submit="submit(credentials)">
        <div class="alert alert-danger" ng-if="errorMessage">
            {{ errorMessage }}
        </div>
        <div class="list list-inset">
            <label class="item item-input">
                <input type="text" ng-model="credentials.username" placeholder="Username" required>
            </label>
            <label class="item item-input">
                <input type="password" ng-model="credentials.password" placeholder="Password" required>
            </label>
            <br><a href="#/app/homepage">HOMEPAGE</a>
        </div>
        <button class="button button-block button-positive" ng-click="submit(credentials)">Login</button>
    </form>
</ion-content>

Hope it's will help someone in the future.