title: AngularJS - Pass Value to Component
body: <p>I am trying to pass a value from one component into another component.</p>
  
  <p><strong>Location List</strong></p>
  
  <pre><code>&lt;div uib-accordion-group class="panel-default" heading="{{location.name}}" ng-repeat="location in $ctrl.locations"&gt;
    &lt;p&gt;This is from location list: {{location.id}}&lt;/p&gt;
    &lt;bike-list locationId="{{location.id}}"&gt;&lt;/bike-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Output:</p>
  
  <p>This is from location list: 1</p>
  
  <p>Location id is:</p>
  
  <p><strong>Bike List</strong></p>
  
  <p><em>bike-list.component.js</em></p>
  
  <pre><code>angular
  .module('bikeList')
  .component('bikeList', {
      templateUrl: 'bike-list/bike-list.template.html',
      controller: ['$rootScope', function ($rootScope) {
          var self = this;
          self.bikes = $rootScope.currentBikes;
  
      }],
      bindings: {
          locationId: '&lt;'
      }
  });
  </code></pre>
  
  <p><em>bike-list.template.html</em></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Location id is : {{$ctrl.locationId}}&lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Output:</p>
  
  <p>Location id is:</p>
  
  <p><strong>Question</strong></p>
  
  <ul>
  <li>How can I get the locationId to bike-list?</li>
  </ul>