You are approaching the problem from the wrong angle, trying to do a low-level DOM manipulation from a controller. This is a big no-no in the AngularJS world and you will get you into all sort of troubles down the road.
Your UI logic shouldn't be "waiting" for a given DOM node to be added to the DOM tree but rather should be expressed declaratively. In this particular case it means that you should write a "slider" directive, something as simple as:
yourModule.directive('mySpinner', function() {
return {
link: function(scope, elm) {
elm.spinner({
max: 20,
min: 1
});
}
};
});
and then use this newly defined directive from within modal's HTML:
<input class="form-control spinner" type="text" my-spinner ng-model="noOfItems"/>
This way you don't need to worry when modal's content gets added to the DOM and you've made yourself a favour of having a reusable way of defining spinners!
Coming back to the $modal-related question - the opened
promise is resolved when all the data are ready and modal is about to be shown (animation starts etc.) to be able to display waiting indicators or similar. By no means it was designed to know when modal's content gets inserted into the DOM tree as with AngularJS this knowledge is not really needed most of the time.