AngularJS Modal (ui.bootstrap.modal) unable to trigger jQuery event after modal is opened (modalInstance.opened)

Question

I am using AngularUI Bootstrap modal dialog (example below). Once the template is opened I want to trigger some jQuery event. I am using modalInstance.opened method, but getting empty object.

mycontroller.js

var app = angular.module('ui.bootstrap.demo');
 app.controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];
  $scope.open = function (size) {

    var modalInstance = $modal.open({
     templateUrl: 'mytemplate.html',
     controller: 'ModalInstanceCtrl',
     size: size,
     resolve: {
        items: function () {
          return $scope.items;
        }
    }
   });

   modalInstance.result.then(function (selectedItem) {
    // form submit. Works fine.
   });

   modalInstance.opened.then(function (selectedItem) {
    // I want to trigger jQuery event on form element
    // When I try to access $("form") I am getting empty object
   });
 }
});

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
   $scope.form = {
     name : "Default Name"
     myItem : items[0]
   }
   $scope.ok = function () {
     $modalInstance.close($scope.form);
   };
});

mytemplate.html

<form>
  <label>Name</label>
  <input type="text" name="name" ng-bind="form.name" />
  ...
</form>

Answer 1

I think since the modal content is transcluded the open event fires but hasn't made that html available to the dom.

A simple timeout for 0s will move it behind the event.

   $timeout ( function(){
        console.log(angular.element("form"));
    },0);

fiddle