AngularJS Child Scope for Element -

i have reusable template called profile.html. looks this:

<div>   {{firstname}}  </div> 

i have embedded in template bound dedicated controller:

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

i want child $scope created div. in controller parent template, have like:

$scope.profile = theprofile; 

i want child scope profile.html template parent $scope.profile. akin to:

<div ng-include src="'templates/profile.html'" ng-scope="{{profile}}"></div> 

how can this?

it looks you're reinventing directives, trying set both template , scope that. also, $scope object large amount of other properties/objects on it, setting object be... problematic.

the following create directive merges passed in profile $scope using angular copy, if want way. i'd recommend using $scope.profile, though.

.directive('profile', [function(){     return{         templateurl:'templates/profile.html',         scope:{profile:'='},         controller: function($scope){             angular.copy($scope.profile, $scope) // if really, want properties right on scope.          }     } }]