Angularインクルードファイルの$ scope値の使い方

Question

Angularjsでng-includeを使用すると問題が発生しました...
Imは単一のhtml形式を持ち、他のhtmlファイルも含んでいます。私のコントローラで

<div ng-controller="appCtrl"> 
<input type="text" ng-model="data.name"> 
{{data.name}}<!--getting the value here--> 
</div> 

Tab1.htmlで
これは私のmain.htmlとあれば...

<div ng-controller="appCtrl"> 
<div ng-include src="'/Tab1.html'"></div> 
{{data.name}} 
<!--trying to use one of the Tab1 field but unable to fetch --> 
<button type="submit" ng-click=save()>Save</button> 
</div> 

angular.module('app') 

.controller('appCtrl', ['$scope', '$http','$routeParams','$rootScope' ,'$location', 
function($scope, $http, $routeParams, $rootScope ,$location){ 

$scope.save= function(){ 
console.log($scope.data);//undefined... 
} 

}) 

間違いがあるかもしれませんが、分かっていません... あらかじめ固定していただきありがとうございます！

Answer 1

NG-含まTab1.html

で親スコープを使用する$ prarent

をアクセスもする子スコープを作成

<div> 
<input type="text" ng-model="$parent.data.name"> 
{{$parent.data.name}}<!--getting the value here--> 
</div> 

Answer 2

この

<div> 
    <input type="text" ng-model="data.name"> 
    {{data.name}}<!--getting the value here--> 
</div> 

のような子divの中にコントローラを取り外してください、それが現在のスコープがかかります。コントローラの使用でも

$scope.data={name:""}; 
$scope.save= function(){ 
    console.log($scope.data); 
} 

、それが動作します。