title: Angular directive with bool attribute passing string instead of bool
body: <p>I'm trying to create a directive that will disable all the input elements inside of the container, but I'm having trouble with the attribute.  This is what I've got for the directive</p>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>angular.module('common')
      .directive('bdDisabled', [function () {
              return {
                  restrict: 'A',
                  scope: {
                      bdDisabled: '='
                  },
                  link: function (scope, element, attrs) {
                      attrs.$observe('bdDisabled', function(newValue, oldValue) {
                          if (newValue !== oldValue) {
                              if (newValue) {
                                  element.find('input, select, button, submit, textarea').prop('disabled', 'disabled');
                              } else {
                                  element.find('input, select, button, submit, textarea').removeProp('disabled');
                              }
  
                          }
                      });
                  }
              };
          }
      ]);
  </code></pre>
  
  <p>This is how I want to use it:</p>
  
  <pre><code>&lt;div class="cg-content cg-shadow" bd-disabled="isLoading"&gt;
  </code></pre>
  
  <p>The problem is that the attribute value is the string <code>isLoading</code> and not the value.</p>
  
  <p>If I wrap it in braces it breaks and I get an error in the console. 
  If I wrap it in braces and change the scope to '@' instead of '=', it works. But it sends the string "true" or "false", not a boolean value.</p>
  
  <p>Where am I going wrong?</p>