Angularjs - angular ui bootstrap

Question

I am trying to develop some Angular.js webapp. In that app I would like to use angular-ui.bootstrap. So i was trying to do so and here is my app.js code. My question is, why do I get error like

reservationController not a function got undefined

if I use the recommended

(function() { })();

at the start of my app.js file?

(function() {
  var app = angular.module('app', ['ngGrid', 'ui.bootstrap']);

  var reservationController = function ($scope, $modal, $log) {
    $scope.items = ['item1', 'item2', 'item3'];
    $scope.open = function (size) {
      var modalInstance = $modal.open({
        templateUrl: 'reservationTemplate.html',
        controller: ModalInstanceCtrl,
        size: size,
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });
      modalInstance.result.then(function (selectedItem) {
        $log.info('Foo');
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  };

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };
  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

})();

Here is hte url to the planker planker - the app