I created a dynamically resizable div as can be seen in this JSFiddle, 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

Uncaught TypeError: $(...).resizable is not a function [line 79 in controller].

Controller

'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 < 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 && !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() > 1) {
            enableCheck('all');
        } else {
            for (var i = 0; i < 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 < 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 < 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);
        });

    });

}]);

View

<section class="analysis" ng-controller="Analysis">
  <table>
    <tr>
      <td id="v1">View 1</td>

      <td id="v2">View 2</td>
    </tr>

    <tr>
      <td colspan="2">View 3</td>
    </tr>
  </table>
  <div id="views-container">
    <label><input type="checkbox" checked="checked" ng-click="changeView()">
    View 1</label>
    <label><input type="checkbox" checked="checked" ng-click="changeView()">
    View 2</label>
    <label><input type="checkbox" checked="checked" ng-click="changeView()">
    View 3</label>
  </div>
</section>