title: angularjs pass ngModel from wrapper directive to wrapped directive
body: <p>I'm new to Angular and still painfully wrapping my head around custom directives. </p>
  
  <p>I'd like to reuse this bit of HTML </p>
  
  <pre><code>&lt;ui-select ng-model="model.selectedLanguages" multiple search-enabled="true" theme="select2" style="width: 300px;"&gt;
      &lt;ui-select-match placeholder="Pick one..."&gt;{{$item.name}}&lt;/ui-select-match&gt;
      &lt;ui-select-choices repeat="lang.id as lang in langs |filter: { name : $select.search }"&gt;
          &lt;div ng-bind-html="lang.name | highlight: $select.search" &gt;&lt;/div&gt; 
      &lt;/ui-select-choices&gt;
  &lt;/ui-select&gt;
  </code></pre>
  
  <p>by wrapping it into my custom directive:</p>
  
  <pre><code>&lt;language-picker ng-model="model.selectedLanguages"/&gt;
  </code></pre>
  
  <p>something like this: </p>
  
  <pre><code>app.directive('languagePicker', function() {
              return {
                  template : '&lt;ui-select ng-model="**PARENT'S NGMODEL**" multiple search-enabled="true" theme="select2" style="width: 300px;"&gt;&lt;ui-select-match &gt;{{$item.name}}&lt;/ui-select-match&gt;&lt;ui-select-choices repeat="lang.id as lang in langs | filter: { name : $select.search }"&gt;&lt;div ng-bind-html="lang.name | highlight: $select.search"&gt;&lt;/div&gt;&lt;/ui-select-choices&gt;&lt;/ui-select&gt;',
                  restrict : 'E',
                  require : 'ngModel',
                  replace : true
                      ....
              };
          });
  </code></pre>
  
  <p>But how do I pass the ngModel from my <code>language-picker</code> to the <code>ui-select</code> directive ?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Using the suggestions below, I got it work with ui-select, but the outer model doesn't get updated at all,see <a href="http://plnkr.co/edit/Y43dmMGIc5GxM9fLoNPW" rel="nofollow noreferrer">plnkr.co/edit/Y43dmMGIc5GxM9fLoNPW</a>, probably because it's child scope and parent scope remains the same? </p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>I got it to work in a convoluted way that looks horrible to me, because I've no idea why it "works" in the first place (see the weird stuff happening in the controller):</p>
  
  <pre><code>app.directive('languagePicker', function(LanguageService) {
              return {
                  templateUrl : 'LanguagePickerTpl.html',
                  restrict : 'E',
                  scope : {
                      languages : '='
                  }, 
                  controller : function($scope, LanguageService) {
                      console.log($scope);
                      $scope.langs = LanguageService.get();
                      $scope.model = $scope;
                  }
  
              };
          })
  </code></pre>
  
  <p>template: </p>
  
  <pre><code>&lt;ui-select ng-model="model.languages" multiple search-enabled="true" 
    theme="select2" style="width: 300px;"&gt;
      &lt;ui-select-match&gt;{{$item.name}}&lt;/ui-select-match&gt;
      &lt;ui-select-choices repeat="lang.id as lang in langs | filter: { name : $select.search }"&gt;
        &lt;div ng-bind-html="lang.name | highlight: $select.search"&gt;&lt;/div&gt;
      &lt;/ui-select-choices&gt;
    &lt;/ui-select&gt;
  </code></pre>
  
  <p>I would be very happy if anyone could explain what's going on  (the "working" example is here 
  <a href="http://plnkr.co/edit/B53F9sc7UGkj0uxUpC17" rel="nofollow noreferrer">http://plnkr.co/edit/B53F9sc7UGkj0uxUpC17</a>
  )</p>