title: Issues when binding a variable in ngFor
body: <p>How do I two-way bind a variable in ngFor so that it dynamically creates the HTML element depending on the value of the variable?</p>
  
  <p>Here is the fiddle showing what I am trying to do: <a href="https://plnkr.co/edit/nmo5zwnSQjTHBk8YxvOJ?p=preview" rel="nofollow">https://plnkr.co/edit/nmo5zwnSQjTHBk8YxvOJ?p=preview</a></p>
  
  <p>Initially hello appears 4 times because I have <code>repeatNumber</code> initialized to 4. But when I change that value, the Hello output should repeat that many  number of times.</p>
  
  <p>Here is my AppComponent:</p>
  
  <p>AppComponent:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {RepeatPipe} from './pipe';
  
  @Component({
      selector: "my-app",
      template: `
        &lt;div&gt;
          &lt;input type="text" value="5" [(ngModel)]="repeatNumber"/&gt;
          &lt;label&gt;Repeat Number: {{repeatNumber}}&lt;/label&gt;
          &lt;div *ngFor='#i of repeatNumber | repeat'&gt;
            Hello
          &lt;/div&gt;
        &lt;/div&gt;
      `,
      pipes: [RepeatPipe]
  })
  export class AppComponent{
    repeatNumber: number = 4;
  }
  </code></pre>
  
  <p>Here is the CustomPipe which helps in repeating the HTML element:</p>
  
  <pre><code>import {Pipe, PipeTransform} from 'angular2/core';
  
  @Pipe({
      name: 'repeat'
  })
  export class RepeatPipe implements PipeTransform{
      transform(value) {
          return (new Array(value)).fill(1);
      }
  }
  </code></pre>