Wrong route request when placing Ionic-slide-box on home

Question

I have the service in this file www/app/home/home.service.js:

 angular.module('app.home')
        .service('services', ['$http',services]);

    function services($http) {
        var service = {};
        var self = this;

        service.listImages = function ($scope) {
            try {
                $http({
                    url: 'http://projeto.local/index/json-banner/status/2/campo/url_file',
                    method: 'POST'
                }).success(function(response, status, headers, config) {
                if (response.length && status == 200) {
                        var dImg = [];
                        for(var i in response) {
                            dImg[i] = 'http://projeto.com.br/imagens/banner/json/' + response[i];
                        }
                        $scope.images = dImg;
                    } else {
                        $scope.images = []
                    }


                });
            } catch (e) {
               console.log(e);
            }
        }

        return service;
    }

Whose, the json’s exit from services.listImages($scope) is just like that:

[
"imagen1.png",
"imagen2.png",
"imagen3.png"
]

And the controller, www/app/home/Home.js, contains the following code:

angular.module('app.home')
    .controller('Home', Home);

function Home($scope, services, $ionicSlideBoxDelegate, $ionicModal, $timeout, $http, $filter) {

    $scope.images = services.listImages($scope);

    // Called each time the slide changes
    $scope.slideChanged = function(index) {
        $scope.slideIndex = index;
    };

}

The view, www/app/home.html, contains the following structure:

<ion-view view-title="Projeto">
    <ion-header-bar class="bar-stable">
        <h1 class="title">Projeto</h1>
    </ion-header-bar>
    <ion-content>
        <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="true" auto-play="true" does-continue="true" slide-interval="3500" ng-if="images.length">
            <ion-slide ng-repeat="slide in images">
                <img src="{{slide}}" width="100%" height="100%" border="0">
            </ion-slide>
        </ion-slide-box>
    </ion-content>
</ion-view>

However my problem is not related to how this works, because the images are being loaded on the screen, the problem is that I am receiving another request that I have no idea what it is, apparently it seems that it is forcing a "state" (http://localhost:8100/#/slide/) :

http://localhost:8100/%7B%7Bslide%7D%7D

See in the image:

This is navigation method:

function configRouter($stateProvider, $urlRouterProvider) {
    $stateProvider

        .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: 'app/layout/layout.html',
            controller: 'Layout'
        })

        .state('app.home', {
            url: '/home',
            views: {
                'menuContent': {
                    templateUrl: 'app/home/home.html',
                    controller: 'Home'
                }
            }
        })

        .state('app.busca-proximo', {
            url: '/busca-proximo',
            views: {
                'menuContent': {
                    templateUrl: 'app/busca-proximo/busca-proximo.html',
                    controller: 'BuscaProximo'
                }
            }
        });

    $urlRouterProvider.otherwise('/app/home');

}

Answer 1

I discovered the problem, I had to change src:

<img src="{{slide}}" width="100%" height="100%" border="0">

For ng-src:

<img ng-src="{{slide}}" width="100%" height="100%" border="0">