Search code examples
javascriptangularjsangularjs-directivescopeangularjs-scope

Losing scope inside ng-include in angularJS


I am trying to pass a scope into ng-include but it doesn't seem to work when I insert it into ng-include. when I put it outside the ng-include... I get the right result but my div doesn't show up when I insert it into ng-include. Any reason why I am losing the scope when I insert the scope inside ng-include?

Index.html:

<select ng-model="ddValue1"
    ng-options="d.text for d in ddOptions1 track by d.value">
</select>

<div ng-include="'{{ddValue1.url}}'"></div>

JS:

$scope.ddOptions1 = [
  {value: 'value1', text: 'Text1', url: 'file path here'},
  {value: 'value2', text: 'Text2', url: 'file path here'}
];
$scope.ddValue1 = {};
$scope.ddValue1.value = $scope.ddOptions1[0].value;

Newdiv.html

<div ng-show="ddValue1.value=='value1'">
    <h1>Value 1</h1>
</div>

Solution

  • <div ng-include=ddValue1.url></div>
    

    Try it. May be single qoute considering it as string rather than your scope propery