AngularJS - ngOptions and UI Bootstrap Modal

(function() {

  "use strict";

  var app = angular.module('plunker', ['ui.bootstrap']);

  app.controller("MainCtrl", MainCtrl);

  MainCtrl.$inject = ["$scope", "$log", "$uibModal"];

  function MainCtrl($scope, $log, $uibModal) {

    // Sample Data
    $scope.cats = [{
      id: 0,
      name: "mister whiskers"
    }, {
      id: 1,
      name: "fluffers"
    }, {
      id: 2,
      name: "captain longtail"
    }];

    $scope.openModal = function() {

      // Open the modal with configurations
      var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html', // Points to my script template
        controller: 'ModalController', // Points to my controller
        controllerAs: 'mc',
        windowClass: 'app-modal-window',
        resolve: {
          cats: function() {
            // Pass the Cats array to the Modal
            return $scope.cats;
          },
          selectedCat: function() {
            // Pass the selected cat to the Modal
            return $scope.selectedCat;
          }
        }
      });

      // Handle the value passed back from the Modal
      modalInstance.result.then(function(returnedCat) {
        if (returnedCat === null || returnedCat === undefined) {
          // Do Nothing
          return;
        }
        
        // We can now update our main model with the modal's output
        $scope.selectedCat = returnedCat;
      });
    }
  }

})();

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>

  <link rel="stylesheet" href="style.css" />
  <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />

  <!-- JQuery and Bootstrap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Angular Stuff -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-touch.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-animate.js"></script>

  <!-- UI Bootstrap Stuff -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

  <!-- OUR Stuff -->
  <script src="app.js"></script>
  <script src="modalController.js"></script>
</head>

<body ng-controller="MainCtrl">
  <!-- ==== MAIN APP HTML ==== -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="jumbotron text-center">
          <h3>AngularJS - ngOptions and UI Bootstrap Modal</h3>
        </div>
      </div>
      <div class="col-xs-12">
        <form class="form">
          <div class="form-group">
            <label class="form-label">Select Profile:</label>
            <select class="form-control" ng-options="cat.name for cat in cats track by cat.id" ng-model="selectedCat" ng-change="openModal()">
              <option value="">-- Cat Selection --</option>
            </select>
          </div>
          <div class="well form-group" ng-show="selectedCat !== undefined && selectedCat !== null">
            <label>Selected: </label>
            <pre>{{ selectedCat }}</pre>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body" id="modal-body">
      <select class="form-control" ng-options="modalCat.name for modalCat in modalCats track by modalCat.id" ng-model="selectedModalCat">
        <option value="">-- Cat Selection --</option>
      </select>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="submit()">OK</button>
      <button class="btn btn-warning" type="button" ng-click="close()">Cancel</button>
    </div>
  </script>
</body>

</html>

/* Put your css in here */

(function() {
  'use strict';

  angular
    .module('plunker')
    .controller('ModalController', ModalController);

  ModalController.$inject = ['$scope', '$timeout', '$uibModalInstance', 'cats', 'selectedCat'];

  function ModalController($scope, $timeout, $uibModalInstance, cats, selectedCat) {

    // Assign Cats to a Modal Controller variable
    console.log("cats: ", cats)

    $scope.modalCats = cats;

    if (selectedCat !== null || selectedCat !== undefined) {
      $scope.selectedModalCat = selectedCat;
    }

    $scope.submit = function() {
      // Pass back modified resort if edit update successful
      $uibModalInstance.close($scope.selectedModalCat);
    }

    $scope.close = function() {
      // Pass back modified resort if edit update successful
      $uibModalInstance.close(null);
    }
  }
})();