AngularJS Templates run twice

Question

AngularJS Templates run twice

I'm working on an AngularJS web app with Twitter Bootstrap. The templates and controllers run twice. I don't know why they do this.

Below is some of the code in the index.html file:

<html data-ng-app="app" ng-controller="AppCtrl">    
<div class="container ng-view" data-ng-view></div>

...

<script>
(function (angular) {
"use strict"; // jshint ;_;
// http://coenraets.org/blog/2012/02/sample-application-with-angular-js/
angular.module('app', ['filters', 'angular', 'currency'])
.config(function($routeProvider) {
    var _view_ = 'view/';
    $routeProvider.
        when('/app',                {templateUrl:_view_+'app/index.html',       }).
        when('/account/settings',   {templateUrl:_view_+'app/settings.html',    }).
        when('/profile/:profile_ID', {templateUrl:_view_+'app/profile.html',    controller:ProfilePageCtrl}).
        when('/discuss',            {templateUrl:_view_+'discuss/discuss.html',     controller:DiscussCtrl}).
        when('/',                   {templateUrl:_view_+'page/home.html'        }).
        when('/:page',              {templateUrl:_view_+'page.html',            controller:PageCtrl}).
        otherwise({redirectTo:'/'});
})
...

Can anybody provide suggestions? Are the templates and controllers supposed to run twice?

2012-12-04 Update: I found out that the templates are running twice, whether they have controllers or not. If a template has a controller, the controller runs twice as well.

twitter-bootstrap
controller
angularjs

Answer 1

Replace

<div class="container ng-view" data-ng-view></div>

with

<div class="container ng-view"></div>

Answer 2

I was having a similar issue: my controllers were being called twice and I was only declaring them in the $routeProvider, not using ng-controller at all. Turns out, I was linking to pages using:

<a href='#somepage'>

instead of

<a href='#/somepage'>

When I rewrote my links to use the #/ at the start, it worked. I guess Angular was "redirecting" #somepage to #/somepage, but calling the controller both times.

I see you are already using #/ at the start of your links, but you also have a <base href="/ "> at the top (and there's a trailing space there, too). Maybe that is confusing Angular and it is triggering some undesired redirect?