Filling common views in abstract state in UI-Router

Question

Would this result in presenting the page with header, footer and content block filled with content.list view?

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts',
        views: {
          header: { templateUrl: 'admin/header.html'},
          content: {
            templateUrl: 'contacts.html',
            controller: function($scope){
                $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
            }
          },
          footer: { templateUrl: 'admin/footer.html'}
        }           
    })
    .state('contacts.list', {
        url: '/list',
        templateUrl: 'contacts.list.html'
    })

.

 <!-- index.html -->
 ...
 <div ui-view="header"></div>
 <div ui-view="content"></div>
 <div ui-view="footer"></div>   
 ...

.

<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>

.

<!-- contacts.list.html -->
<ul>
    <li ng-repeat="person in contacts">
        <a ng-href="#/contacts/{{person.id}}">{{person.name}}</a>
    </li>
</ul>

Answer 1

Yes, this will work. There is a working plunker.

The parent view's $scope (the view, defined in state 'contacts' views as a 'content') and its scope, will be a source for prototypical inheritance.

And that means, that its properties will be available in the child state 'contacts.list', because it is injected into that 'content' view

There is in detail more about it:

How do I share $scope data between states in angularjs ui-router?

To prove, it, we can extend the code snippet above with a list controller and inject some more contacts

    ...
    .state('contacts.list', {
      url: '/list',
      templateUrl: 'contacts.list.html',
      controller: 'listCtrl', // new controller
    })

  }
])
// we get already initiated contacts... coming from parent view
.controller('listCtrl', ['$scope', function($scope) {

    $scope.contacts
      .push({ id: 2, name: "from a child" });

}])

Check it here