Bootstrap Modal validation displaying on dismiss

I have a form view in AngularJS and I'm using a modal from Angular-ui to display my form. Functionality wise, everything works great, however, when I dismiss the form, validation pop-ups display if the form is invalid. This is what it looks like: The pop-up doesn't show at all when the form is open but only when I click cancel and it starts fading away. HMTL: ``` <form name='newGroupForm'> <div class="modal-body"> <label for="groupName">Group Name: <input id="groupName" type="text" ng-model='newGroup.name' required> </label> <br/> <label for="groupDesc">Group Description: <input id="groupDesc" type="text" ng-model='newGroup.desc'> </label> <br/> <label for="groupOwner">Group Name: <select id="groupOwner" type="text" ></select> </label> </div> <div class="modal-footer"> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> <button class="btn btn-primary" type="button" ng-click="submit()" ng-disabled="newGroupForm.$invalid">Create</button> </div> </form> ``` Modal Controller: ``` spApp.controller('newGroupCtrl', function newGroupCtrl($scope, $modalInstance, groupService){ $scope.newGroup = { name:null, desc: null }; $scope.submit = function(){ $modalInstance.close($scope.newGroup); } $scope.cancel = function (){ $modalInstance.dismiss('Cancelled group creation'); }; } ); ```