diff --git a/angularFiles.js b/angularFiles.js
index 311a39139322..6565d4254695 100644
--- a/angularFiles.js
+++ b/angularFiles.js
@@ -74,6 +74,7 @@ var angularFiles = {
     'src/ng/directive/ngNonBindable.js',
     'src/ng/directive/ngOptions.js',
     'src/ng/directive/ngPluralize.js',
+    'src/ng/directive/ngRef.js',
     'src/ng/directive/ngRepeat.js',
     'src/ng/directive/ngShowHide.js',
     'src/ng/directive/ngStyle.js',
diff --git a/src/AngularPublic.js b/src/AngularPublic.js
index c18889911a50..dca14bdd6ffd 100644
--- a/src/AngularPublic.js
+++ b/src/AngularPublic.js
@@ -28,6 +28,7 @@
   ngInitDirective,
   ngNonBindableDirective,
   ngPluralizeDirective,
+  ngRefDirective,
   ngRepeatDirective,
   ngShowDirective,
   ngStyleDirective,
@@ -194,6 +195,7 @@ function publishExternalAPI(angular) {
             ngInit: ngInitDirective,
             ngNonBindable: ngNonBindableDirective,
             ngPluralize: ngPluralizeDirective,
+            ngRef: ngRefDirective,
             ngRepeat: ngRepeatDirective,
             ngShow: ngShowDirective,
             ngStyle: ngStyleDirective,
diff --git a/src/ng/directive/ngRef.js b/src/ng/directive/ngRef.js
new file mode 100644
index 000000000000..51408561947a
--- /dev/null
+++ b/src/ng/directive/ngRef.js
@@ -0,0 +1,209 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name ngRef
+ * @restrict A
+ *
+ * @description
+ * The `ngRef` attribute tells AngularJS to assign the element component controller
+ * to the given property in the current scope.
+ *
+ * If the component is destroyed `null` is assigned to the property.
+ *
+ *
+ * @element ANY
+ * @param {string} ngRef property name - this must be a valid AngularJS expression identifier
+ *
+ *
+ * @example
+ * ### Simple toggle
+ * This example shows how the controller of the component toggle
+ * is reused in the template through the scope to use its logic.
+ * <example name="ng-ref-component" module="myApp">
+ *   <file name="index.html">
+ *     <my-toggle ng-ref="myToggle"></my-toggle>
+ *     <button ng-click="myToggle.toggle()">Toggle</button>
+ *     <div ng-show="myToggle.isOpen()">
+ *       You are using a component in the same template to show it.
+ *     </div>
+ *   </file>
+ *   <file name="index.js">
+ *     angular.module('myApp', []);
+ *   </file>
+ *   <file name="toggle.js">
+ *     function ToggleController() {
+ *       var opened = false;
+ *       this.isOpen = function() { return opened; };
+ *       this.toggle = function() { opened = !opened; };
+ *     }
+ *
+ *     angular.module('myApp').component('myToggle', {
+ *       controller: ToggleController
+ *     });
+ *   </file>
+ *   <file name="protractor.js" type="protractor">
+ *      it('should publish the toggle into the scope', function() {
+ *        var toggle = element(by.buttonText('Toggle'));
+ *        expect(toggle.evaluate('myToggle.isOpen()')).toEqual(false);
+ *        toggle.click();
+ *        expect(toggle.evaluate('myToggle.isOpen()')).toEqual(true);
+ *      });
+ *   </file>
+ * </example>
+ *
+ * @example
+ * ### ngRef inside scopes
+ * This example shows how new scopes limits
+ * <example name="ng-ref-scopes" module="myApp">
+ *   <file name="index.html">
+ *     <h3>Outer Toggle</h3>
+ *     <my-toggle ng-ref="outerToggle">Outer Toggle</my-toggle>
+ *     <div>outerToggle.isOpen(): {{outerToggle.isOpen() | json}}</div>
+ *
+ *     <h3>ngRepeat toggle</h3>
+ *     <ul>
+ *     <li ng-repeat="i in [1,2,3]">
+ *        <my-toggle ng-ref="ngRepeatToggle">ngRepeat Toggle {{i}}</my-toggle>
+ *        <div>ngRepeatToggle.isOpen(): {{ngRepeatToggle.isOpen() | json}}</div>
+ *        <div>outerToggle.isOpen(): {{outerToggle.isOpen() | json}}</div>
+ *     </li>
+ *     </ul>
+ *     <div>ngRepeat.isOpen(): {{ngRepeatToggle.isOpen() | json}}</div>
+ *
+ *     <h3>ngIf toggle</h3>
+ *     <div ng-if="true">
+ *        <my-toggle ng-ref="ngIfToggle">ngIf Toggle</my-toggle>
+ *        <div>ngIfToggle.isOpen(): {{ngIfToggle.isOpen() | json}}</div>
+ *        <div>outerToggle.isOpen(): {{outerToggle.isOpen() | json}}</div>
+ *     </div>
+ *     <div>ngIf.isOpen(): {{ngIf.isOpen() | json}}</div>
+ *   </file>
+ *   <file name="index.js">
+ *     angular.module('myApp', []);
+ *   </file>
+ *   <file name="toggle.js">
+ *     function ToggleController() {
+ *       var opened = false;
+ *       this.isOpen = function() { return opened; };
+ *       this.toggle = function() { opened = !opened; };
+ *     }
+ *
+ *     angular.module('myApp').component('myToggle', {
+ *       template: '<button ng-click="$ctrl.toggle()" ng-transclude></button>',
+ *       transclude: true,
+ *       controller: ToggleController
+ *     });
+ *   </file>
+ *   <file name="protractor.js" type="protractor">
+ *      var OuterToggle = function() {
+ *        this.toggle = function() {
+ *          element(by.buttonText('Outer Toggle')).click();
+ *        };
+ *        this.isOpen = function() {
+ *          return element.all(by.binding('outerToggle.isOpen()')).first().getText();
+ *        };
+ *      };
+ *      var NgRepeatToggle = function(i) {
+ *        var parent = element.all(by.repeater('i in [1,2,3]')).get(i - 1);
+ *        this.toggle = function() {
+ *          element(by.buttonText('ngRepeat Toggle ' + i)).click();
+ *        };
+ *        this.isOpen = function() {
+ *          return parent.element(by.binding('ngRepeatToggle.isOpen() | json')).getText();
+ *        };
+ *        this.isOuterOpen = function() {
+ *          return parent.element(by.binding('outerToggle.isOpen() | json')).getText();
+ *        };
+ *      };
+ *      var NgRepeatToggles = function() {
+ *        var toggles = [1,2,3].map(function(i) { return new NgRepeatToggle(i); });
+ *        this.forEach = function(fn) {
+ *          toggles.forEach(fn);
+ *        };
+ *        this.isOuterOpen = function(i) {
+ *          return toggles[i - 1].isOuterOpen();
+ *        };
+ *      };
+ *      var NgIfToggle = function() {
+ *        var parent = element(by.css('[ng-if]'));
+ *        this.toggle = function() {
+ *          element(by.buttonText('ngIf Toggle')).click();
+ *        };
+ *        this.isOpen = function() {
+ *          return by.binding('ngIfToggle.isOpen() | json').getText();
+ *        };
+ *        this.isOuterOpen = function() {
+ *          return parent.element(by.binding('outerToggle.isOpen() | json')).getText();
+ *        };
+ *      };
+ *
+ *      it('should toggle the outer toggle', function() {
+ *        var outerToggle = new OuterToggle();
+ *        expect(outerToggle.isOpen()).toEqual('outerToggle.isOpen(): false');
+ *        outerToggle.toggle();
+ *        expect(outerToggle.isOpen()).toEqual('outerToggle.isOpen(): true');
+ *      });
+ *
+ *      it('should toggle all outer toggles', function() {
+ *        var outerToggle = new OuterToggle();
+ *        var repeatToggles = new NgRepeatToggles();
+ *        var ifToggle = new NgIfToggle();
+ *        expect(outerToggle.isOpen()).toEqual('outerToggle.isOpen(): false');
+ *        expect(repeatToggles.isOuterOpen(1)).toEqual('outerToggle.isOpen(): false');
+ *        expect(repeatToggles.isOuterOpen(2)).toEqual('outerToggle.isOpen(): false');
+ *        expect(repeatToggles.isOuterOpen(3)).toEqual('outerToggle.isOpen(): false');
+ *        expect(ifToggle.isOuterOpen()).toEqual('outerToggle.isOpen(): false');
+ *        outerToggle.toggle();
+ *        expect(outerToggle.isOpen()).toEqual('outerToggle.isOpen(): true');
+ *        expect(repeatToggles.isOuterOpen(1)).toEqual('outerToggle.isOpen(): true');
+ *        expect(repeatToggles.isOuterOpen(2)).toEqual('outerToggle.isOpen(): true');
+ *        expect(repeatToggles.isOuterOpen(3)).toEqual('outerToggle.isOpen(): true');
+ *        expect(ifToggle.isOuterOpen()).toEqual('outerToggle.isOpen(): true');
+ *      });
+ *
+ *      it('should toggle each repeat iteration separately', function() {
+ *        var repeatToggles = new NgRepeatToggles();
+ *
+ *        repeatToggles.forEach(function(repeatToggle) {
+ *          expect(repeatToggle.isOpen()).toEqual('ngRepeatToggle.isOpen(): false');
+ *          expect(repeatToggle.isOuterOpen()).toEqual('outerToggle.isOpen(): false');
+ *          repeatToggle.toggle();
+ *          expect(repeatToggle.isOpen()).toEqual('ngRepeatToggle.isOpen(): true');
+ *          expect(repeatToggle.isOuterOpen()).toEqual('outerToggle.isOpen(): false');
+ *        });
+ *      });
+ *   </file>
+ * </example>
+ *
+ */
+var ngRefDirective = ['$parse',function($parse) {
+  return {
+    priority: -1,
+    restrict: 'A',
+    compile: function(tElement, tAttrs) {
+      // gets the expected controller name, converts <data-some-thing> into "someThing"
+      var controllerName = directiveNormalize(nodeName_(tElement));
+
+      // get the expression for value binding
+      var getter = $parse(tAttrs.ngRef);
+      var setter = getter.assign;
+
+      return function(scope, element) {
+        // gets the controller of the current component or the current DOM element
+        var controller = element.data('$' + controllerName + 'Controller');
+        var value = controller || element[0];
+        setter(scope, value);
+
+        // when the element is removed, remove it (nullify it)
+        element.on('$destroy', function() {
+          // only remove it if value has not changed,
+          // carefully because animations (and other procedures) may duplicate elements
+          if (getter(scope) === value) {
+            setter(scope,  null);
+          }
+        });
+      };
+    }
+  };
+}];
diff --git a/test/ng/directive/ngRefSpec.js b/test/ng/directive/ngRefSpec.js
new file mode 100644
index 000000000000..1984750a66b7
--- /dev/null
+++ b/test/ng/directive/ngRefSpec.js
@@ -0,0 +1,330 @@
+'use strict';
+
+describe('ngRef', function() {
+
+  describe('given a component', function() {
+
+    var myComponentController, $rootScope, $compile;
+
+    beforeEach(module(function($compileProvider) {
+      $compileProvider.component('myComponent', {
+        template: 'foo',
+        controller: function() {
+          myComponentController = this;
+        }
+      });
+    }));
+
+    beforeEach(module(function($exceptionHandlerProvider) {
+      $exceptionHandlerProvider.mode('log');
+    }));
+
+    beforeEach(inject(function(_$compile_, _$rootScope_) {
+      $rootScope = _$rootScope_;
+      $compile = _$compile_;
+    }));
+
+    afterEach(inject(function($exceptionHandler) {
+      if ($exceptionHandler.errors.length) {
+        dump(jasmine.getEnv().currentSpec.getFullName());
+        dump('$exceptionHandler has errors');
+        dump($exceptionHandler.errors);
+        expect($exceptionHandler.errors).toBe([]);
+      }
+    }));
+
+    it('should bind in the current scope the controller of a component', function() {
+      $rootScope.$ctrl = 'undamaged';
+
+      $compile('<my-component ng-ref="myComponent"></my-component>')($rootScope);
+      expect($rootScope.$ctrl).toBe('undamaged');
+      expect($rootScope.myComponent).toBe(myComponentController);
+    });
+
+    it('should work with non:normalized entity name', function() {
+      $compile('<my:component ng-ref="myComponent1"></my:component>')($rootScope);
+      expect($rootScope.myComponent1).toBe(myComponentController);
+    });
+
+    it('should work with data-non-normalized entity name', function() {
+      $compile('<data-my-component ng-ref="myComponent2"></data-my-component>')($rootScope);
+      expect($rootScope.myComponent2).toBe(myComponentController);
+    });
+
+    it('should work with x-non-normalized entity name', function() {
+      $compile('<x-my-component ng-ref="myComponent3"></x-my-component>')($rootScope);
+      expect($rootScope.myComponent3).toBe(myComponentController);
+    });
+
+    it('should work with data-non-normalized attribute name', function() {
+      $compile('<my-component data-ng-ref="myComponent1"></my-component>')($rootScope);
+      expect($rootScope.myComponent1).toBe(myComponentController);
+    });
+
+    it('should work with x-non-normalized attribute name', function() {
+      $compile('<my-component x-ng-ref="myComponent2"></my-component>')($rootScope);
+      expect($rootScope.myComponent2).toBe(myComponentController);
+    });
+
+    it('should not leak to parent scopes', function() {
+      var template =
+        '<div ng-if="true">' +
+          '<my-component ng-ref="myComponent"></my-component>' +
+        '</div>';
+      $compile(template)($rootScope);
+      expect($rootScope.myComponent).toBe(undefined);
+    });
+
+    it('should nullify the variable once the component is destroyed', function() {
+      var template = '<div><my-component ng-ref="myComponent"></my-component></div>';
+
+      var element = $compile(template)($rootScope);
+      expect($rootScope.myComponent).toBe(myComponentController);
+
+      var componentElement = element.children();
+      var isolateScope = componentElement.isolateScope();
+      componentElement.remove();
+      isolateScope.$destroy();
+      expect($rootScope.myComponent).toBe(null);
+    });
+
+    it('should be compatible with entering/leaving components', inject(function($animate) {
+      var template = '<my-component ng-ref="myComponent"></my-component>';
+      $rootScope.$ctrl = {};
+      var parent = $compile('<div></div>')($rootScope);
+
+      var leaving = $compile(template)($rootScope);
+      var leavingController = myComponentController;
+
+      $animate.enter(leaving, parent);
+      expect($rootScope.myComponent).toBe(leavingController);
+
+      var entering = $compile(template)($rootScope);
+      var enteringController = myComponentController;
+
+      $animate.enter(entering, parent);
+      $animate.leave(leaving, parent);
+      expect($rootScope.myComponent).toBe(enteringController);
+    }));
+
+    it('should allow bind to a parent controller', function() {
+      $rootScope.$ctrl = {};
+
+      $compile('<my-component ng-ref="$ctrl.myComponent"></my-component>')($rootScope);
+      expect($rootScope.$ctrl.myComponent).toBe(myComponentController);
+    });
+
+  });
+
+  it('should bind the dom element if no component', inject(function($compile, $rootScope) {
+    $compile('<span ng-ref="mySpan">my text</span>')($rootScope);
+    expect($rootScope.mySpan.textContent).toBe('my text');
+  }));
+
+  it('should nullify the dom element value if it is destroyed', inject(function($compile, $rootScope) {
+    var element = $compile('<div><span ng-ref="mySpan">my text</span></div>')($rootScope);
+    element.children().remove();
+    expect($rootScope.mySpan).toBe(null);
+  }));
+
+  it('should be compatible with directives on entities with controller', function() {
+    var myDirectiveController;
+
+    module(function($compileProvider) {
+      $compileProvider.directive('myDirective', function() {
+        return {
+          controller: function() {
+            myDirectiveController = this;
+          }
+        };
+      });
+    });
+
+    inject(function($compile, $rootScope) {
+      $compile('<my-directive ng-ref="myDirective"></my-directive>')($rootScope);
+
+      expect($rootScope.myDirective).toBe(myDirectiveController);
+    });
+  });
+
+  it('should work with transclussion', function() {
+    module(function($compileProvider) {
+      $compileProvider
+        .component('myComponent', {
+          transclude: true,
+          template: '<ng-transclude></ng-transclude>',
+          controller: function() {
+            this.text = 'SUCCESS';
+          }
+        });
+    });
+
+    inject(function($compile, $rootScope) {
+      var template = '<my-component ng-ref="myComponent">{{myComponent.text}}</my-component>';
+      var element = $compile(template)($rootScope);
+      $rootScope.$apply();
+      expect(element.text()).toBe('SUCCESS');
+      dealoc(element);
+    });
+  });
+
+  it('should be compatible with element transclude components', function() {
+    module(function($compileProvider) {
+      $compileProvider
+        .component('myComponent', {
+          transclude: 'element',
+          controller: function($animate, $element, $transclude) {
+            this.text = 'SUCCESS';
+            $transclude(function(clone, newScope) {
+              $animate.enter(clone, $element.parent(), $element);
+            });
+          }
+        });
+    });
+
+    inject(function($compile, $rootScope) {
+      var template =
+        '<div>' +
+          '<my-component ng-ref="myComponent">' +
+            '{{myComponent.text}}' +
+          '</my-component>' +
+        '</div>';
+      var element = $compile(template)($rootScope);
+      $rootScope.$apply();
+      expect(element.text()).toBe('SUCCESS');
+      dealoc(element);
+    });
+  });
+
+  it('should be compatible with ngIf and transclusion on same element', function() {
+    module(function($compileProvider) {
+      $compileProvider.component('myComponent', {
+        template: '<ng-transclude></ng-transclude>',
+        transclude: true,
+        controller: function($scope) {
+          this.text = 'SUCCESS';
+        }
+      });
+    });
+
+    inject(function($compile, $rootScope) {
+      var template =
+        '<div>' +
+          '<my-component ng-if="present" ng-ref="myComponent" >' +
+              '{{myComponent.text}}' +
+          '</my-component>' +
+        '</div>';
+      var element = $compile(template)($rootScope);
+
+      $rootScope.$apply('present = false');
+      expect(element.text()).toBe('');
+      $rootScope.$apply('present = true');
+      expect(element.text()).toBe('SUCCESS');
+      $rootScope.$apply('present = false');
+      expect(element.text()).toBe('');
+      $rootScope.$apply('present = true');
+      expect(element.text()).toBe('SUCCESS');
+      dealoc(element);
+    });
+  });
+
+  it('should be compatible with element transclude&destroy components', function() {
+    var myComponentController;
+    module(function($compileProvider) {
+      $compileProvider
+        .component('myTranscludingComponent', {
+          transclude: 'element',
+          controller: function($animate, $element, $transclude) {
+            myComponentController = this;
+
+            var currentClone, currentScope;
+            this.transclude = function(text) {
+              this.text = text;
+              $transclude(function(clone, newScope) {
+                currentClone = clone;
+                currentScope = newScope;
+                $animate.enter(clone, $element.parent(), $element);
+              });
+            };
+            this.destroy = function() {
+              currentClone.remove();
+              currentScope.$destroy();
+            };
+          }
+        });
+    });
+
+    inject(function($compile, $rootScope) {
+      var template =
+        '<div>' +
+          '<my-transcluding-component ng-ref="myComponent">' +
+            '{{myComponent.text}}' +
+          '</my-transcluding-component>' +
+        '</div>';
+      var element = $compile(template)($rootScope);
+      $rootScope.$apply();
+      expect(element.text()).toBe('');
+
+      myComponentController.transclude('transcludedOk');
+      $rootScope.$apply();
+      expect(element.text()).toBe('transcludedOk');
+
+      myComponentController.destroy();
+      $rootScope.$apply();
+      expect(element.text()).toBe('');
+    });
+  });
+
+  it('should be compatible with element transclude directives', function() {
+    module(function($compileProvider) {
+      $compileProvider
+        .directive('myDirective', function() {
+          return {
+            transclude: 'element',
+            controller: function($animate, $element, $transclude) {
+              this.text = 'SUCCESS';
+              $transclude(function(clone, newScope) {
+                $animate.enter(clone, $element.parent(), $element);
+              });
+            }
+          };
+        });
+    });
+
+    inject(function($compile, $rootScope) {
+      var template =
+        '<div>' +
+          '<my-directive ng-ref="myDirective">' +
+            '{{myDirective.text}}' +
+          '</my-directive>' +
+        '</div>';
+      var element = $compile(template)($rootScope);
+      $rootScope.$apply();
+      expect(element.text()).toBe('SUCCESS');
+      dealoc(element);
+    });
+  });
+
+  it('should work with components with templates via $http', function() {
+    module(function($compileProvider) {
+      $compileProvider.component('httpComponent', {
+        templateUrl: 'template.html',
+        controller: function() {
+          this.me = true;
+        }
+      });
+    });
+
+    inject(function($compile, $httpBackend, $rootScope) {
+      var template = '<div><http-component ng-ref="controller"></http-component></div>';
+      var element = $compile(template)($rootScope);
+      $httpBackend.expect('GET', 'template.html').respond('ok');
+      $rootScope.$apply();
+      expect($rootScope.controller).toBeUndefined();
+      $httpBackend.flush();
+      expect($rootScope.controller.me).toBe(true);
+      dealoc(element);
+    });
+  });
+
+});