title: Attaching a directive dynamically to a child of current directive upon event
body: <p>My directive "addOnce" is required to check if it has an "restrict" attribute and if yes, then attach certain other directives to the input box which is one of it's sub-children.</p>
  
  <p>I have been able to layout a framework to get this done. However getting stuck at how I can dynamically attach other directives to the input box.</p>
  
  <p>Plnkr here: <a href="http://plnkr.co/edit/jYiTtTQ0uPuH40zcMcer" rel="nofollow">http://plnkr.co/edit/jYiTtTQ0uPuH40zcMcer</a></p>
  
  <pre><code>app.directive('addOnce', ['$timeout', function($timeout){
      return {
  
      restrict: 'E',
      link: function(scope, el, attrs){
  
        if(attrs.restrict){
          var input = el.find('input');
  
          $timeout(function(){
            input.val('testing');  
          }, 50)
  
  
          // now attach directive restrict-symbols to the input box
          // as a result the html would look like
           //&lt;input type="text" class="aClass" ng-model="aModel" restrict-symbols&gt;
        }
  
  
      }
    };
  
  }]);
  </code></pre>
  
  <p>Any clues will be appreciated.</p>