JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://oitozero.github.io/ngSweetAlert/bower_components/sweetalert/lib/sweet-alert.min.js"></script>
<link rel="stylesheet" href="http://oitozero.github.io/ngSweetAlert/bower_components/sweetalert/lib/sweet-alert.css">
<div ng-app='theApp' ng-controller='SampleController as c'>
    
    <label>Search</label><p><input type='text' ng-model='c.topic'/>    
    
    <button ng-click='c.getTopMatch()'>Get Top Match</button>
    
    <p>
        <span ng-show='c.topMatch.length !=""'>Top Match: {{c.topMatch}}<span> 
    </p>
        
</div>

JavaScript

angular.module('oitozero.ngSweetAlert', [])
.factory('SweetAlert', [ function ( ) {

	var swal = window.swal;

	//public methods
	var self = {

		swal: function ( arg1, arg2, arg3 ) {
			swal( arg1, arg2, arg3 );
		},
		success: function(title, message) {
			swal( title, message, 'success' );
		},
		error: function(title, message) {
			swal( title, message, 'error' );
		},
		warning: function(title, message) {
			swal( title, message, 'warning' );
		},
		info: function(title, message) {	
			swal( title, message, 'info' );
		}
	};
	
	return self;
}]);



var app = angular.module('theApp', ['oitozero.ngSweetAlert']);

app.controller('SampleController',['$http', '$q', 'SweetAlert', function($http, $q, SweetAlert) {
    var self = this;
    
    self.topic = 'angularjs';

    self.topMatch = '';

    
    self.getTopMatch = function() {
                        
        $http.jsonp('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&callback=JSON_CALLBACK',
                    {
                        params : { 'q' : self.topic }
                    })
        .success(function(data) {        

            self.topMatch = data.responseData.results[0].url;  
            
            SweetAlert.swal({
               title: "Clear Search?",
               text: "Everyone wants a clear textbox",
               type: "success",
               showCancelButton: true,
               cancelButtonText: 'No',
               confirmButtonText: "Yes!"
            }, 
            function(isConfirm){                        
                if (!isConfirm) return;
                
                var deferred = $q.defer();
                deferred.promise.then(function() {
                    self.topic = '';
                });
                
                deferred.resolve();
                
            });      
            
        });     
        
    };
}]);