Clicking link does not display page ( ionic + angular )

Question

I have a list of items , but when I clicked the href of each item that does not lead me to the page of detail.

Also, How could place the animation right to display the page of href ?

This is my file app.js :

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

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

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

    $ionicConfigProvider.navBar.alignTitle("center"); // centrar titulo de cada contenido de tab

    $stateProvider
        .state("app",{
            templateUrl: "templates/app.html",
            url: "/app",
            abstract: true
        })
        .state("app.noticias", {
            url: "/noticias",
            views: {
                "app-noticias":{
                    templateUrl: "templates/noticias.html",
                    controller: "noticiasCtrl"
                }
            }
        })  
        .state("app.servicios", {
            url: "/servicios",
            views: {
                "app-servicios":{
                    templateUrl: "templates/servicios.html",
                    controller: "serviciosCtrl"
                }
            }
        })


        .state('forgotpassword', {
          url: "/forgot-password",
          templateUrl: "templates/forgot-password.html"
        })

        $urlRouterProvider.otherwise("/app/noticias"); // Para cuando no encuentre nada se vaya a la pagina que se quiere mostrar por default           

})

.controller("noticiasCtrl", function($scope)
{

    $scope.rawData = [{
      "tipo": "noticia",
      "titulo": "Fin de semana de Madres",
      "bg": "img1.png"
    }, {
      "tipo": "evento",
      "titulo": "Eminem en vivo, 10% off",
      "bg": "img2.png"
    }, {
      "id": "noticia",
      "titulo": "12 Cosas para comprar",
      "bg": "img3.png"    
    }];
})

.controller("serviciosCtrl", function($scope)
{

})

This is my file noticias.html :

    <ion-view title="Noticias">

    <ion-content ng-controller="noticiasCtrl" style="top:0">
          <div class="header-image"></div>
          <ion-list>
            <ion-item ng-repeat="item in rawData" class="item-noticias overlay" ng-style="{'background':'url(img/{{item.bg}}) no-repeat center', 'background-size':'cover'}" >                
                <div class="overlay">       
                    <p>{{ item.tipo }}</p>
                    <p>{{ item.titulo }}</p>
                    <p><a href="#/app/forgot-password">Leer mas</a></p>

                </div>                        
            </ion-item>
          </ion-list>

      </ion-content>

</ion-view>

Answer 1

You are using states, so use ui-sref with states like so

<a ui-sref="home">Home</a> | <a ui-sref="about">About</a>

<ul>
    <li ng-repeat="contact in contacts">
        <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
    </li>
</ul>

instead of href use ui-sref="stateName" check out https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref