How to use Bootstrap alerts using AngularJS

Question

Hi My project works on Djnago and AngularJS. I want include bootstrap alerts once the user submit. If it is successful show alert-success etc. How can I do this? The following is my angularJS code:

$scope.submit =function(){
    data = {};
    angular.extend(data, $scope.final_data);
    angular.extend(data, { xxx: $scope.final_data.xxx });
    $http.post('{% url 'submission' %}', data).success(
        function(data){
            $scope.get_info();
            alert('DONE!')
        }).error(function(){
            alert('not submitted');
    })
};

Both the alert is working, I want to replace that with bootstrap alerts. How can I do that? Thanks in advance.

Answer 1

Well, you can show/hide alert using ng-show/ng-hide according to error status . I have created a sample plunker.

<alert ng-show='alertType' type="{{alertType}}" close='removeAlert()'>{{alertType}} Alert</alert>
  <select ng-model="alertType">
    <option>danger</option>
    <option>success</option>
    <option>warning</option>
  </select>

This may help you.