robin robin - 1 year ago 261
AngularJS Question

Issue With MD-Dialog

I am having an MD-dialog controller like below.

var HomeController = function ($scope) {

$scope.demoNonLinear = function () {
var element = document.querySelector('.mdl-stepper#stepper-non-linear');
if (!element) return false;
var stepper = element.MaterialStepper;
var steps = element.querySelectorAll('.mdl-step');
var step;

// Upgrade the component.
if (typeof componentHandler === 'undefined') {
console.log('Missing componentHandler');
} else {
console.log('componentHandler is available');

for (var i = 0; i < steps.length; i++) {
step = steps[i];
step.addEventListener('onstepnext', function (e) {
setTimeout(function () {;
}, 4000);


The line

var element = document.querySelector('.mdl-stepper#stepper-non-linear');

is not working on the md-dialog html instead it works on the main document. Ho can I make it work on my md-dialog content ?

Plunker link

Answer Source

Try this to select your element in angular.

var element = angular.element( document.querySelector( '#stepper-non-linear' ) );


I've wrapped the function in a angular.element(document).ready event which will be executed when document is ready rather than the $timeout approach.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download