title: Jquery UI Dialog with AngularJS
body: <p>I'm learning AngularJS, I searched in google but can not find even a solution to my problem.</p>
  
  <p>I am using jQueryUI for dialog, bootstrap for CSS and I want AngularJS for events and queries to the database.</p>
  
  <p>I have the following files:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="es-MX"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta content="IE=edge" http-equiv="X-UA-Compatible"&gt;
  
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;link rel="stylesheet" href="js/jquery-ui-1.11.4/jquery-ui.min.css"&gt;&lt;/link&gt;
      &lt;link rel="stylesheet" href="bootstrap-3.3.4/css/bootstrap.min.css"&gt;    
  
      &lt;script src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui-1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt; 
      &lt;script src="js/demo.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/angular-1.3.15/angular.js"&gt;&lt;/script&gt;
  
      &lt;div class="navbar-wrapper"&gt;
          &lt;div class="container"&gt;
              &lt;nav class="navbar navbar-inverse navbar-static-top"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="navbar-header"&gt;
                          &lt;button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"&gt;
                              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;a class="navbar-brand"&gt;&lt;span class="glyphicon glyphicon-home" aria-hidden="true"&gt;&lt;/span&gt; Menu&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div id="navbar" class="navbar-collapse collapse active"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li id="mJobs"&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-wrench" aria-hidden="true"&gt;&lt;/span&gt;JOBS&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  
      &lt;div id="d_window"&gt;&lt;/div&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>file demo.js</p>
  
  <pre><code>$(function(){
      $( "#d_window" ).dialog({
        autoOpen: false,
        position: { my: "center", at: "center" }
      });
  
  
      $("#mJobs").click(function(){        
          $.ajax({
              url: 'views/jobs.html',
              type: 'POST',
              dataType: 'html',
              data: 'content',
          }).done(function (data) {
              $( "#d_window" ).html('');
              $( "#d_window" ).append(data);
              $( "#d_window" ).dialog( "open" );
          });
      });
  });
  </code></pre>
  
  <p>file jobs.html</p>
  
  <pre><code>&lt;script src="js/bolsaAPP.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app="bolsaAPP"&gt;
  &lt;table class="table" ng-controller="bolsaView"&gt; 
      &lt;tr&gt;
          &lt;td colspan="2" align="center"&gt;
              &lt;button id="btnEnviarBolsa" ng-click="SendJobs()" class="btn btn-info btn-xs"&gt; Send&lt;/button&gt;        
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>file bolsaAPP.js</p>
  
  <pre><code>var bolsaAPP = angular.module('bolsaAPP', [ ]);
  
  bolsaAPP.controller('bolsaView', function($scope){
      console.log('enter');
      $scope.SendJobs = function(){
          console.log('hello');   
      };  
  });
  </code></pre>
  
  <p>To give displayable send does not display anything on the console</p>
  
  <p>Any idea?</p>