fix(uiView): do not leave initial view scope undestroyed (fix unhandled rejection)

This is a backport of #3164 from `master` to `legacy`

Previously the contents of the initial view were linked and left
undestroyed when the view was replaced with a subview. Because the view
was not destroyed, directives like ngInclude assumed it was safe to
compile and link asynchronous content to it. This would cause a ctreq
error if the asynchronous content required another directive from the
DOM. Now the initial view is either not linked at all or its scope is
properly destroyed.

Closes #3164

Author: jpekkala

src/viewDirective.js

@@ -307,12 +307,16 @@ function $ViewDirectiveFill (  $compile,   $controller,   $state,   $interpolate
     priority: -400,
     compile: function (tElement) {
       var initial = tElement.html();
+      tElement.empty();
+
       return function (scope, $element, attrs) {
         var current = $state.$current,
             name = getUiViewName(scope, attrs, $element, $interpolate),
             locals  = current && current.locals[name];
 
         if (! locals) {
+          $element.html(initial);
+          $compile($element.contents())(scope);
           return;
         }
 

test/viewDirectiveSpec.js

@@ -88,6 +88,7 @@ describe('uiView', function () {
     controller: function() {
       this.someProperty = "value"
     },
+    template: "{{vm.someProperty}}",
     controllerAs: "vm"
   },
   lState = {
@@ -324,7 +325,7 @@ describe('uiView', function () {
   });
 
   it('should instantiate a controller with controllerAs', inject(function($state, $q) {
-    elem.append($compile('<div><ui-view>{{vm.someProperty}}</ui-view></div>')(scope));
+    elem.append($compile('<div><ui-view></ui-view></div>')(scope));
     $state.transitionTo(kState);
     $q.flush();
 
@@ -734,3 +735,51 @@ describe("UiView", function() {
     }));
   }
 });
+
+describe('uiView transclusion', function() {
+  var scope, $compile, elem;
+
+  beforeEach(function() {
+    app = angular.module('foo', []);
+
+    app.directive('scopeObserver', function() {
+      return {
+        restrict: 'E',
+        link: function(scope) {
+          scope.$emit('directiveCreated');
+          scope.$on('$destroy', function() {
+            scope.$emit('directiveDestroyed');
+          });
+        }
+      };
+    });
+  });
+
+  beforeEach(module('ui.router', 'foo'));
+
+  beforeEach(module(function($stateProvider) {
+    $stateProvider
+        .state('a', { template: '<ui-view><scope-observer></scope-observer></ui-view>' })
+        .state('a.b', { template: 'anything' });
+  }));
+
+  beforeEach(inject(function ($rootScope, _$compile_) {
+    scope = $rootScope.$new();
+    $compile = _$compile_;
+    elem = angular.element('<div>');
+  }));
+
+  it('should not link the initial view and leave its scope undestroyed when a subview is activated', inject(function($state, $q) {
+    var aliveCount = 0;
+    scope.$on('directiveCreated', function() {
+      aliveCount++;
+    });
+    scope.$on('directiveDestroyed', function() {
+      aliveCount--;
+    });
+    elem.append($compile('<div><ui-view></ui-view></div>')(scope));
+    $state.transitionTo('a.b');
+    $q.flush();
+    expect(aliveCount).toBe(0);
+  }));
+});