Bootstrap material design- floating labels are not floated when data is loaded dynamically

Question

I am using bootstrap material design for my angular app. Everything works fine except when I change the models associated with inputs (floating label inputs) programmatically after the page has been loaded, the floating labels are not floated.

Answer 1

You must fire a change event when you change the value programmatically.

Answer 2

If you are using Angular2 then no custom directive is needed. On the label do something like this.

<label [class.active]="name && name.length > 0">Some Label</label>