title: How can I pass an object reference to an inner directive in Angular JS?
body: <p>I have a directive which creates an autocomplete input</p>
  
  <pre><code>angular.module('autocomplete', [] )
      .directive('autocomplete', function (...) {
          return {
              restrict: 'E',
              scope: {
                  "id": "@id",
                  "selectedObject": "=selectedobject",
                  "baseSearchUrl" : "@basesearchurl"
              },
              templateUrl: "..."
              link: function(...){...}
          }
      }
  </code></pre>
  
  <p>an example of usage:</p>
  
  <pre><code>&lt;autocomplete
      id="favoriteMovie"
      selectedobject='favMovie'
      searchUrl='/rest/movies?search=' /&gt;
  </code></pre>
  
  <p>It works great. Now what I want is to create a new, more specific, directive that create an autocomplete for movies, so I can use it like this:</p>
  
  <pre><code>&lt;autocompleteMovie
      id="favoriteMovie"
      selectedmovie='favMovie'/&gt;
  </code></pre>
  
  <p>The new directive looks like this:</p>
  
  <pre><code>angular.module('autocompletemovie', [])
  .directive(
      'autocompletemovie',
      function() {
          return {
              restrict : 'E',
              scope : {
                  "id" : "@",
                  "selectedMovie" : "=selectedmovie"
              },
              templateUrl : '...'
          };
      });
  </code></pre>
  
  <p>My Html template for the new component:</p>
  
  <pre><code>&lt;autocomplete
      id="{{id}}"
      selectedobject='{{selectedMovie}}'
      searchUrl='/rest/movies?search=' /&gt;
  </code></pre>
  
  <p>But this is not working. The <code>id</code> attribute is passed correctly to the "inner" <code>autocomplete</code>, however the object reference set by the <code>selectedmovie</code> attribute is not working.</p>
  
  <p>I have made a second try, passing the name of the object reference instead of the object itself:</p>
  
  <p>Directive:</p>
  
  <pre><code>angular.module('autocompletemovie', [])
  .directive(
      'autocompletemovie',
      function() {
          return {
              restrict : 'E',
              scope : {
                  "id" : "@",
                  "selectedMovie" : "@selectedmovie"
              },
              templateUrl : '...'
          };
      });
  </code></pre>
  
  <p>But that did not work as well.</p>
  
  <p>I hope that you can understand what I'm trying to achieve.</p>
  
  <p>[Edit]
  I have also tried :</p>
  
  <pre><code>&lt;autocomplete
      id="{{id}}"
      selectedobject='selectedMovie'
      searchUrl='/rest/movies?search=' /&gt;
  </code></pre>
  
  <p>But it doesn't work. An object with the fixed name <code>selectedMovie</code> is created on the scope, even if I call the directive with a different <code>selectedmovie</code> attribute:</p>
  
  <pre><code>&lt;autocompleteMovie
      id="favoriteMovie"
      selectedmovie='favMovie'/&gt;
  </code></pre>
  
  <p>In the example above I would like to have an object called <code>favoriteMovie</code> and not <code>selectedMovie</code>.</p>
  
  <p>[/Edit]</p>