Angular 2 [hidden] does not seem to be working? : <p>My component is defined this way:</p>

<pre><code>import { Component } from 'angular2/core'

@Component({
    selector: 'sidebar',
    templateUrl: 'js/app/views/sidebar.html',
})
export class SidebarComponent {
    public sections: boolean[] = [
        true,
        false,
        false,
        false,
        false,
        false,
        false,
        false
    ];
}
</code></pre>

<p>The <code>sidebar.html</code> template:</p>

<pre><code>&lt;h3 class="proofTitle"&gt;...&lt;/h3&gt;
&lt;p [hidden]="sections[0]"&gt;
    ...
&lt;/p&gt;
&lt;p [hidden]="sections[1]"&gt;
    ...
&lt;/p&gt;
...
&lt;p [hidden]="sections[7]"&gt;
    ...
&lt;/p&gt;
</code></pre>

<p>Seems pretty straight forward, but for some reason, it's showing all of the sections... what am I missing?</p>
