title: One way binding to an object in angular
body: <p>I'd like to have a one-way (not one time) binding between an attribute on a directive, but i'm struggling with how to express this without <code>attrs.$observe</code>. The best I can come up with at the moment is to bind via <code>&amp;attr</code> and invoke the variables I am binding to in my template e.g. <code>{{attr()}}</code> </p>
  
  <pre><code>app.controller('MainCtrl', function($scope) {
    $scope.names = ['Original'];
    setTimeout(function () {
      $scope.names.push('Asynchronously updated name');
      $scope.$apply();
    }, 1000);
  });
  
  app.directive('helloComponent', function () {
    return {
      scope: {
        'names': '&amp;names'
      },
      template: '&lt;li ng-repeat="name in names()"&gt;Hello {{name}}&lt;/li&gt;'
    }
  });
  </code></pre>
  
  <p></p>
  
  <pre><code> &lt;body ng-controller="MainCtrl"&gt;
      &lt;ul&gt;
        &lt;hello-component names="names"/&gt;
      &lt;/ul&gt;
    &lt;/body&gt;
  </code></pre>
  
  <h1><a href="http://plnkr.co/edit/SxU3nFvkZBi89dfrGFTt?p=preview" rel="nofollow">Plunker</a></h1>
  
  <p>Is there a better way to do this that preserves the one-way binding without the need to invoke the bound properties?</p>
  
  <h2>Edit</h2>
  
  <p>I've updated the example code to clarify that I want to bind to an object, not just a string. So <code>@attr</code> (which works with a string attribute) is <em>not</em> a solution.</p>