title: AngularJS passing object into isolated scope
body: <p>I am trying to create a reusable html element / angular directive that will be used inside of ng-repeat so I want to pass it the values it will display in the DOM.</p>
  
  <p>Something worth noting, I don't care for the values to bind. They can be a one-time binding simply displaying their values the first time ng-repeat creates them.</p>
  
  <p>For example here is my directive:</p>
  
  <pre><code> app.directive('newsListing', function () {
      return {
          restrict: 'AE',
          replace: 'true',
          templateUrl: '../Pages/Views/Templates/newsListing.html',
          scope: {},
          link: function (scope, elem, attrs) {
              //Fairly sure this is where the binding needs to happen?
          }
      };
  });
  </code></pre>
  
  <p>My HTML template:</p>
  
  <pre><code>&lt;div&gt;
  &lt;span class="glyphicon glyphicon-list-alt logo-green"&gt;&lt;/span&gt;
  &lt;label&gt;{{DateValue}}&lt;/label&gt;
  &lt;label&gt;{{Category}}&lt;/label&gt;
  &lt;label class="noBorder"&gt;{{Content}}&lt;/label&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I want the ending product to be:</p>
  
  <pre><code>&lt;news-Listing Date="{{someValue}}" Category="{{someValue}}" Content="{{someValue}}"&gt;&lt;/news-Listing&gt;
  </code></pre>
  
  <p>I have never created a directive before and all the guides I am trying to follow don't explain the scope, and the way binding happens inside of a directive.</p>