title: Creating a custom attribute with AngularJS
body: <p>I'm new to AngularJS. I'm trying to write a directive that will set the <code>background-color</code> of a <code>&lt;div&gt;</code> based on some scenario. Essentially, in my view, I want to be able to write this code:</p>
  
  <pre><code>&lt;div effect-color="#2D2F2A"&gt;content here&lt;/div&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;div effect-color="{{effectColor}}"&gt;content here&lt;/div&gt;
  </code></pre>
  
  <p>I know I need a directive. Currently, I'm doing this:</p>
  
  <pre><code>.directive('effectColor', [
    function () {
      return {
        restrict: 'A',
        controller: [
          '$scope', '$element', '$attrs', '$location', 
          function ($scope, $element, $attrs, $location) {
            // how do I get the value of effect-color here?
          }
        ]
      }
    }
  ]);
  </code></pre>
  
  <p>I'm not sure how to get the value of the attribute itself. Do I need to add a scope? I just want the attribute value.</p>
  
  <p>Thank you!</p>