title: Directive selector doesn't find element
body: <p>When I change the selector to <code>'input'</code> it works on every input it can find. If I change it to <code>'input[numeric]'</code> nothing happens (yes the <code>input[numeric]</code> is really there).
  What am I doing wrong? Isn't it supposed to work like this? It says CSS selector in the documentation...</p>
  
  <pre><code>import {Directive, ElementRef} from '@angular/core';
  import {NgModel} from '@angular/common';
  
  @Directive({
      selector: 'input[numeric]',
      host: {
          '(input)' : 'onInputChange()'
      }
  })
  export class NumberFormatDirective {
  
      constructor(public model: NgModel, public element: ElementRef) {
          console.log(1);
      }
  
      onInputChange(): any {
          console.log(2);
      }
  }
  </code></pre>
  
  <p>The template looks like this:</p>
  
  <pre><code>&lt;input *ngIf='!isMultiLine()'
         [attr.readonly]='readonly'
         [attr.disabled]='isInputDisabled()'
         [attr.minlength]='minLength'
         [attr.maxlength]='maxLength'
         [attr.numeric]='isNumeric()'
         [(ngModel)]='value' (ngModelChange)='valueChanged($event)'
         (keyup.enter)='updateValueRestore()'
         (keyup.escape)='resetValue()'
         (focus)='onFocus()'
         (blur)='onBlur()'
         autocomplete='off'/&gt;
  </code></pre>