ng-include prohibits routes to be run

I have a very strange behavior in an AngularJS app: I am registering routes using the $routeProvider. This works perfectly unless I embed an ng-include element BEFORE the ng-view.

Currently I have two options to fix it:

  • Move the ng-include to a place after the ng-view element.
  • Wrap the ng-include inside a <div> element.

Any idea what might cause this issue?

Try it as 

    <div ng-controller="MainCtrl" ng-include src="template">

    angular.module('App')
        .controller('MainCtrl',['$route','$scope', function($route,$scope){
                $scope.template= 'main.html';
        }]);

In main.html, place the ng-view tag.

In this case, you need to handle ng-include with the controller and inject $route as dependency.

i too had some issues with the $route. one idea that solved my problems was to just use ng-switch for the ng-include instead of ng-view Conditional ng-include in angularjs