Помогите, пожалуйста, к директиве дописать независимый scope
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<script type="text/ng-template" id="customTemplate">
<table>
<tr ng-repeat='item in arr'>
<td>{{item.name}}</td>
</tr>
</table>
</script>
</head>
<body>
<div id="main" ng-controller="ResController">
<div table-list="arrFruits"></div>
</div>
</body>
var customModule = angular.module('customModule', []);
customModule.directive("tableList",function () {
return {
link: function(scope, element, attrs) {
scope.arr = scope[attrs.tableList];
},
restrict: "A",
template: function () {
return angular.element(document.querySelector("#customTemplate")).html();
},
replace: true
}
});
customModule.controller('ResController', function ($scope) {
$scope.arrFruits = [
{ name: "Apple" },
{ name: "Pear" },
{ name: "Cherry" },
{ name: "Plum" }
];
});