title: jQuery resizable is not working inside of Angular JS
body: <p>I created a dynamically resizable div as can be seen in this <a href="https://jsfiddle.net/18k3umpp/3/" rel="nofollow">JSFiddle</a>, but when I tried to put this code into my AngularJS project it doesn't work. NOTE: I have added the jQuery UI CSS. The only error message I receive is when I resize the page, here's what it says </p>
  
  <blockquote>
    <p><code>Uncaught TypeError: $(...).resizable is not a function</code> [line 79 in controller].</p>
  </blockquote>
  
  <h1>Controller</h1>
  
  <pre><code>'use strict';
  
  angular.module('oct').controller('Analysis', ['$scope', '$log', 'OctSettings', function($scope, $log, OctSettings) {
      var tds = document.getElementsByTagName('td');
      var inputs = document.getElementsByTagName('input');
      var rows = document.getElementsByTagName('tr');
  
      console.log(inputs);
  
      $scope.changeView = function() {
  
          for (var i = 0; i &lt; inputs.length; i++) {
              if (!inputs[i].checked) {
                  if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
              } else {
                  if (tds[i].style.display === 'none') tds[i].style.display = '';
              }
          }
  
          if (!inputs[0].checked &amp;&amp; !inputs[1].checked) rows[0].style.display = 'none';
          else rows[0].style.display = '';
  
          if (!inputs[2].checked) rows[1].style.display = 'none';
          else rows[1].style.display = '';
  
          disableChecksIfNeeded();
  
      };
  
      var disableChecksIfNeeded = function(num) {
          if (countChecks() &gt; 1) {
              enableCheck('all');
          } else {
              for (var i = 0; i &lt; inputs.length; i++) {
                  if (inputs[i].checked) inputs[i].disabled=true;
              }
          }
      };
  
      var disableCheck = function(num) {
          inputs[num].disabled = true;
      };
  
      var enableCheck = function(num) {
          if (num === 'all') {
              for (var i = 0; i &lt; inputs.length; i++) {
                  inputs[0].disabled=false;
              }
          } else {
              inputs[num].disabled = false;
          }
      };
  
      var countChecks = function() {
          var count = 0;
          var index = -1;
  
          console.log(inputs.length);
  
          for (var i = 0; i &lt; inputs.length; i++) {
              if (inputs[i].checked) count++;
          }
          return count;
      };
  
      $scope.changeView();
  
  
  
      $(window).on('load resize', function() {
          console.log('hi');
          var windowWidth = $(window).width();
          var windowHeight = $(window).height();
          var v1Width = $('#v1').width();
  
  
          $('#v1').resizable({
              minWidth: 50,
              maxWidth: windowWidth - 80,
              maxHeight: windowHeight * (0.83),
              handles: 'e, s'
          }).on('resize', function() {
  
              if (v1Width === $('#v1').width()) {
                  $('#v2').height(0);
              }
              v1Width = $('#v1').width();
          });
  
          $('#v2').resizable({
              maxHeight: windowHeight * (0.83),
              handles: 's'
          }).on('resize', function() {
              $('#v1').height(0);
          });
  
      });
  
  }]);
  </code></pre>
  
  <h1>View</h1>
  
  <pre><code>&lt;section class="analysis" ng-controller="Analysis"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td id="v1"&gt;View 1&lt;/td&gt;
  
        &lt;td id="v2"&gt;View 2&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td colspan="2"&gt;View 3&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;div id="views-container"&gt;
      &lt;label&gt;&lt;input type="checkbox" checked="checked" ng-click="changeView()"&gt;
      View 1&lt;/label&gt;
      &lt;label&gt;&lt;input type="checkbox" checked="checked" ng-click="changeView()"&gt;
      View 2&lt;/label&gt;
      &lt;label&gt;&lt;input type="checkbox" checked="checked" ng-click="changeView()"&gt;
      View 3&lt;/label&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>