Dismiss modal view issues

Question

I want to create a button action create with disable/enable button then close model view: // button: type="submit" class="btn btn-primary" data-dismiss="modal" ng-disabled="!newSong.name" ng-click="saveSong()" >Create --> Issue: when ng-click done --> view modal did not close

Answer 1

The reason why your code was not working is because of $scope.newSong = {};
in this code:

$scope.saveSong = function () {
        $scope.songs.push($scope.newSong);
        $scope.newSong = {};
    };

Whenever you are trying to submit the form $scope.newSong = {} is making it invalid.

HTML CODE

<div ng-app="myApp", ng-controller ="myController">
<div ng-repeat="id in songs">
      <ul>
        <li> Name song: {{id.name}} </li>
        <li> Name artist: {{id.artist}} </li>
      </ul>
  </div>
  <div class="col-lg-1">  <button type="button" class="btn btn-info glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal" ng-click="clear()">   Add New </button> </div>
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"> Create New Song</h4>
        </div> 
        <div class="modal-body">
          <form class="form-horizontal" role ="form" name="formName" novalidate>

            <div class="form-group" >
              <label class="control-label col-sm-2"> Name* </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="name" ng-model="newSong.name" required/>
                <div class="custom-error" ng-show="formName.name.$dirty && formName.name.$invalid">
                  <p ng-show="formName.name.$invalid && !formName.name.$pristine" class="help-block"> name is required.</p>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-2">Artist</label>
              <div class="col-sm-10">
                <input type="text" class="form-control"ng-model="newSong.artist">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary"  data-dismiss="modal" ng-disabled="!newSong.name" ng-click="saveSong()" >Create</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<br/><br/>

Angular CODE

var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope){
  $scope.songs = [
  {
    "name": "Everybody",
    "artist": "Backstreet Boys.",
    "id": 1
  },
  {
    "name": "Feel Like Makin' Love",
    "artist": "Bad Company.",
    "id": 2
  },
  {
    "name": "Sister of Pearl",
    "artist": "Baio.",
    "id": 3
  }];
     $scope.newSong = {};

    /* callback ng-click create */
    $scope.saveSong = function () {
        $scope.songs.push($scope.newSong);
       // $scope.newSong = {};
    };
  $scope.clear = function(){

  $scope.newSong = {};
    $scope.$setPristine(true);
  }
});

WORKING LINK

Hope that works :)