Using Material Design Lite with AngularJS

Question

I'm running into trouble trying to use Material Design Lite and AngularJS. After googling for a bit, I found another stack overflow post regarding a similar issue: Material Design Lite Integration with AngularJS

I am trying to load data into a table by pushing data from an ajax request into a model. From there the view is updated by AngularJS. Since the table uses Material Design Lite's javascript to add in functionality to select multiple entries, the new table entries do not seem to be updated with the proper classes/attributes.

As prescribed by others in the other stack overflow question, we need to run componentHandler.upgradeAllRegistered(); . This does not seem to upgrade the elements correctly.

Here is a JSFiddle of an example: https://jsfiddle.net/chaseme/50n21fao/1/

Does anyone have any insight on this? Thanks.

Answer 1

I suggest you use the angular-material-design-lite project. It's a simple wrapper that will handle the integration for you.

Or you could use the Angular team's implementation .