作用域变量未传递到使用ng-include包含的模板

Question

Scope variable not getting passed to template included through ng-include tag. I want the generic.html page to come with page1.html and page2.html. I am getting the static content Hi,Welcome like that but when I click a method in controller1.js the name enclosed in angular directive is not getting printed. I tried to name in one object like $scope.user = {} and added user.name then also I am not able to bond name in the html template.

Main.js

 $stateProvider
        .state('index', {
            parent: 'app',
            abstract : true,
            url: '/index',
            views: {
                'content@': {
                    templateUrl: urlpath+'ngtemplates/chat/chat.menu.html',
                    controller: ['$state',function ($state) {
                      $state.go('screen.welcome');
                    }]
                }
            }
        })
        .state('screen.welcome', {
            url: '',
                    templateUrl: urlpath+'templates/page1.html',
                    controller:'Controller1'
        })
        .state('screen.details', {
            url: '',
                    templateUrl: urlpath+'templates/page2.html',
                    controller:'Controller2'
        })

Controller1.js

$scope.selected = function(){
$scope.name = "Jim";
}

generic.html

<div ng-app="sampleapp">
<h1> Hi, Welcome! </h1>
<p> {{name}} </p>
</div>

Answer 1

You need to add controller to the template

   <div ng-app="sampleapp">
     <div ng-controller = "Controller1"> //controller added 
        <h1> Hi, Welcome! </h1>
        <p> {{name}} </p>
    </div>
        </div>

Answer 2

You can also use controllerAs syntax.

.state('screen.details', {
        url: '',
                templateUrl: urlpath+'templates/page2.html',
                controllerAs:'vm'
    })

And in the Html you can access like {{vm.name}}.

Point here is if you use ControllerAs syntax you no need to put ng-controller in your HTML.