binding ng-include src using $scope property

Question

In angularjs app I want to dynamically load partial view, so I have in my view

<ng-include src="'{{ pathView }}'"></ng-include>

this view is ofcourse attached to certain controller and in my controller I have

 $scope.pathView= "/templates/listView.html";

this not work since when investigating html view I'm getting

<!-- ngInclude: undefined -->

When I hardcode template view path

<ng-include src="'/templates/listView.html'"></ng-include>

it works.

What I'm doing wrong?

Answer 1

src in ng-include needs a angular expression reference , so you can bind that to the model value as below

<ng-include src="pathView"></ng-include>

Answer 2

Remove {{ and }}

Correct way <ng-include src="pathView"></ng-include>