How to use Angular Material design in Qliksense 3.0 Extension?

[prabhuappu]

Hi,

I'm trying to use angular material theme in Qliksense 3.0 extension. As mentioned in the angular material documentation, i included all the dependent libraries,

'../AngularMaterialChart/bower_components/angular-animate/angular-animate',

'../AngularMaterialChart/bower_components/angular-aria/angular-aria',

'../AngularMaterialChart/bower_components/angular-messages/angular-messages',

'../AngularMaterialChart/bower_components/angular-material/angular-material'

And included the dependency using the below code. But it is not working. Is it correct to inject the dependency like this?

angular.module('qlik-angular').requires.push('ngMaterial');

Code:

define(['jquery',
  "text!./bower_components/angular-material/angular-material-less.css",
  "text!extensions/AngularMaterialChart/template.html",
  "text!./style.css",
  'js/qlik',
  '../AngularMaterialChart/bower_components/angular-animate/angular-animate',
  '../AngularMaterialChart/bower_components/angular-aria/angular-aria',
  '../AngularMaterialChart/bower_components/angular-messages/angular-messages',
  '../AngularMaterialChart/bower_components/angular-material/angular-material'
],
  function ($,
    AngularCSS,
    index,
    style,
    qlik
  ) {
    return {

     template: `<div qv-extension >
      <md-button>Sample</md-button>
      </div>`,

     paint: function ($element) {
        $("<style>").html(AngularCSS).appendTo("head");
        $("<style>").html(style).appendTo("head");


        angular.module('qlik-angular').requires.push('ngMaterial');


      },
      controller: ['$scope', function ($scope) {


      }]
    };


  });

Please Help!!!

Regards,

Prabhu Appu