title: Angular directive can not scope ng-model
body: <p>I'm trying to fill a form with existing values using the controller $scope to pass those to the DOM.
  Now, I'm using a directive to read and write values in a specific select menu (where I use bootstrap form helpers) menu:</p>
  
  <pre><code>app.directive('currencypicker', function () {
      return {
          restrict: 'A',
          require: '?ngModel',
          scope: {
              ngModel: '='
          },
       link: function (scope, elem, attrs, ctrl) {
           elem.addClass('bfh-currencies');
           elem.addClass('bfh-selectbox');
  
           elem.bfhselectbox({
               filter: (elem.attr('data-filter') == 'true') ? true : false
           }).on('change.bfhselectbox', function() {
              return scope.$apply(function () {
                  return scope.ngModel = elem.val();
              });
           });
  
           return elem.bfhcurrencies({
               flags: (elem.attr('data-flags') == 'true') ? true : false,
               currency: scope.ngModel || 'EUR'
           });
         }
      };
  });
  </code></pre>
  
  <p>Here the HTML snippet</p>
  
  <pre><code>&lt;div currencypicker id="cost-currency" data-flags="true" data-filter="true" ng-model="newEvent.cost_currency"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem is that when I try to assign my model value to <em>currency</em> attribute with scope.ngModel it evaluates always to undefined and so 'EUR' value is assigned, I checked my scope with firebug, where ngModel value is "GBP".
  I can't figure out why it happens.</p>