Angularjs Partial Template With Specific Scope

I'd like to include a partial template inside my main template, but having a specific scope when I call the partial template. For example, this is my main template (very simplified

Solution 1:

As ng-view can only be found once in the page, I used ng-include and the ng-init to initialize the scope of the specific controller :

<divng-include="'/myPartial.html'"ng-init="init(items.item1)"ng-controller="YourController"></div>

controller :

this.app.controller("YourController", functionYourController($scope) {
    $scope.init = function(item){
        $scope.item = item;
    }
});

Solution 2:

<div ng-view="myPartial.html" ng-controller="yourController"></div>

and then create yourController as angular controller (or use existing) and assign data to $scope.item1

Solution 3:

In case your items are in same format than you will want to use ngInclude. ngView directive is used for different purposes.

Controller:

$scope.items = {item1: {name:"test1"}, item2: {name: "test2"}};

Main view:

<divng-repeat="item in items"ng-include="'myPartial.html'"></div>

myPartial.html:

<h2>{{item.name}}</h2>...