title: AngularJs: How to pass part of my data from one component to another
body: <p>I have an angular control that I use to display a set of data looking roughly like the following example. Apart from a unique block, it has a number of repeating (but discrete) blocks of the same structure.</p>
  
  <pre><code>{
    "person": {
      "lastName": "Bettertester",
      "firstName": "Fester",
      "address": "Out in the woods 17",
      "zipCode": "10666",
      "place": "Back of beyond"
    },
    "contact1": {
      "firstName": "Jane",
      "lastName": "Doe",
      "phone": "555-987-654",
      "relationship": "Aunt"
    },
    "contact2": {
      "firstName": "Kherumple",
      "lastName": "Whaduffle",
      "phone": "555-666-000",
      "relationship": "Imaginary friend"
    },
    "contact3": {
      "firstName": "Kherumple",
      "lastName": "Whaduffle",
      "phone": "555-666-000",
      "relationship": "Imaginary friend"
    }
  }
  </code></pre>
  
  <p>I have written an angularjs component to retrieve and display this structure but want to hand the repeating block off to another component.</p>
  
  <pre><code>angular.module('myModule').component('mainComponent', {
    templateUrl : 'person.template.html',
    controller : [ '$scope', '$http', function mainController($scope, $http) {
      var self = this;
      self.data = null;
      $http.get(url).then(function(response) {
        self.data = response.data;
      }, function(response, status) {
        console.warn("Error while loading data");
        console.warn(" - response=", response);
        console.warn(" - status=", status);
        self.data = null;
      });
    } ]
  });
  </code></pre>
  
  <p>The corresponding template:</p>
  
  <pre><code>&lt;div&gt;
    &lt;h1&gt;Person information&lt;/h1&gt;
    &lt;table&gt;
    &lt;tr&gt;
      &lt;th class="label-column"&gt;First &amp; last name&lt;/th&gt;
      &lt;td class="data"&gt;{{$ctrl.data.person.firstName}} {{$ctrl.data.person.lastName}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="label-column"&gt;Address&lt;/th&gt;
      &lt;td class="data"&gt;{{$ctrl.data.person.address}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="label-column"&gt;ZIP code &amp; Place&lt;/th&gt;
      &lt;td class="data"&gt;{{$ctrl.data.person.zipCode}} {{$ctrl.data.person.place}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;contact details="{{$ctrl.data.contact1}}"&gt;&lt;/contact&gt; &lt;!-- passing the details like this sort of works --&gt;
    &lt;contact details="{{$ctrl.data.contact2}}"&gt;&lt;/contact&gt;
    &lt;contact details="$ctrl.data.contact3"&gt;&lt;/contact&gt;     &lt;!-- passing the details like this does not work at all --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The controller for the contact details looks as follows:</p>
  
  <pre><code>angular.module('myModule').component('contact', {
    templateUrl : 'contact.template.html',
    bindings : {
      details : '@'
    },
    controller : [ '$scope', '$http', function contactController($scope, $http) {
      var self = this;
      console.log("- details=", self.details);
    } ]
  });
  </code></pre>
  
  <p>And the corresponding template:</p>
  
  <pre><code>&lt;div&gt;
    &lt;h2&gt;Contact&lt;/h2&gt;
    &lt;table&gt;
    &lt;!-- this works --&gt;
    &lt;tr&gt;
      &lt;th class="label-column"&gt;Everything&lt;/th&gt;
      &lt;td class="data"&gt;{{$ctrl.details}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="label-column"&gt;First &amp; last name&lt;/th&gt;
      &lt;td class="data"&gt;{{$ctrl.details.firstName}} {{$ctrl.details.lastName}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="label-column"&gt;Phone&lt;/th&gt;
      &lt;td class="data"&gt;{{$ctrl.details.phone}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="label-column"&gt;Relationship&lt;/th&gt;
      &lt;td class="data"&gt;{{$ctrl.details.relationship}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;contact details="{{$ctrl.data.contact1}}"&gt;&lt;/contact&gt;
    &lt;contact details="{{$ctrl.data.contact2}}"&gt;&lt;/contact&gt;
    &lt;contact details="{{$ctrl.data.contact3}}"&gt;&lt;/contact&gt;
    &lt;contact details="{{$ctrl.data.contact4}}"&gt;&lt;/contact&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My questions is how to correctly pass the contact details that are part of the mainComponent to the contactComponent in a way that lets me access its fields in the corresponding template. If I pass them without the curly braces, the contact component does not seem to get any data at all. If I pass them with the curly braces, the contact component seems to get them in a way, but not as correct json object as I am unable to access fields within the contact block. I'm sure I'm missing something trivial but did not manage to find out where I go wrong.</p>