title: Angular 1.5: pass attribute to component
body: <p>I feel like I got stuck in a black hole between Angular versions, and I haven't been capable of doing something that should be simple. Docs aren't helping.</p>
  
  <p>I'm using 1.5.x, and doing a small component that's supposed to serve as a "loading..." text with a light animation inside, this is the component code:</p>
  
  <pre><code>ctrls.component('limbo', {
    bindings: {
      loadingtext: '='
    },
  
    controller: function () {
      this.test = 0;
      this.p = '...';
  
      this.$onInit = function () {
        this.tmo = setInterval(function () {
          this.p += '.';
          document.getElementById('loader_txt').innerHTML = this.p;
  
          if (this.p.length  === 18)
            this.p = '...';
        }.bind(this), 100);
      };
    },
  
    template: [
      '&lt;div class="alert alert-info"&gt;',
        '&lt;span&gt;{{$ctrl.loadingtext}}&lt;/span&gt;',
        '&lt;span&gt;{{loadingtext}}&lt;/span&gt;',
        '&lt;span id="loader_txt"&gt;&lt;/span&gt;',
      '&lt;/div&gt;'
    ].join('')
  });
  </code></pre>
  
  <p>And this is the html in the partial that's supposed to use it:</p>
  
  <pre><code>&lt;limbo loadingtext="loading projects"&gt;&lt;/limbo&gt;
  </code></pre>
  
  <p>I tried both options {{$ctrl.loadingtext}} and {{loadingtext}}. Could someone please explain me how this communication works. I want the component to receive two attributes, one is the text that is going to display while the loading is present, and the other is an additional class that could apply to that particular limbo instance.</p>