title: Focus textarea on ng-click
body: <p>I want to click a button from within <code>ng-repeat</code> and focus on <code>textarea</code> from that <strong>specific item</strong> in the loop.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-repeat="item in items"&gt;
    &lt;textarea focus-when="showTextarea"&gt;{{ item }}&lt;/textarea&gt;
    &lt;a ng-click="trigger()" href="#"&gt;Focus&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.items = ['World', 'Earth', 'Fire'];
  
    $scope.trigger = function() {
      $scope.showTextarea = true;
    }
  });
  
  app.directive('focusWhen', function($scope) {
    return {
      link: function(scope, element, attrs) {
        scope.$watch(attrs.focusWhen, function(value) {
          console.log(attrs);
          element.css('background','red');
          console.log(element[0]);
          element[0].focus();
        });      
      }
    }
  
  });
  </code></pre>
  
  <p>Code: <a href="http://plnkr.co/edit/By0hLs7U6CLbGD9ic9vO?p=preview" rel="nofollow">http://plnkr.co/edit/By0hLs7U6CLbGD9ic9vO?p=preview</a></p>
  
  <p>I have directive <code>focusWhen</code> which watched the <code>showTextarea</code> scope variable. When <code>ng-click</code> trigger, it will change this <code>showTextarea</code> to true and it should focus the <code>textarea</code></p>
  
  <p>However, my code doesn't work and it has error</p>
  
  <p><code>Error: [$injector:unpr] Unknown provider: $scopeProvider &lt;- $scope &lt;- focusWhenDirective</code></p>
  
  <p>I am not sure why. Two questions:</p>
  
  <ol>
  <li><p>Can you help to point out where I got this wrong </p></li>
  <li><p>How to do the focus after clicking?</p></li>
  </ol>
  
  <p>Thanks.</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>I got this to work using code below</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
  &lt;div ng-repeat="item in items"&gt;
      &lt;button class="btn" ng-click="showForm=true; focusInput=true"&gt;show form and focus input #{{ item }}&lt;/button&gt;
      &lt;div ng-show="showForm"&gt;
        &lt;input type="text" focus-me="focusInput"&gt;
        &lt;button class="btn" ng-click="showForm=false"&gt;hide form&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var app = angular.module('plunker', []);
  var MyCtrl = function ($scope, $timeout) {
    $scope.items = [1,2,3];
  };
  
  app.directive('focusMe', function($timeout) {
    return {
      scope: { trigger: '=focusMe' },
      link: function(scope, element) {
        scope.$watch('trigger', function(value) {
          if(value === true) { 
            //console.log('trigger',value);
            //$timeout(function() {
              element[0].focus();
              scope.trigger = false;
            //});
          }
        });
      }
    };
  });
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/yZ21NYb5EkUTSAWOVjHZ?p=preview" rel="nofollow">http://plnkr.co/edit/yZ21NYb5EkUTSAWOVjHZ?p=preview</a></p>
  
  <p>I am not sure why but somehow using <code>scope: { trigger: '=focusMe' }</code> made a different. Any clue?</p>