Angularjs toastr: Show toast at the bottom right
<p>I am new to using <a href="http://codeseven.github.io/toastr/demo.html" rel="nofollow">toastr</a>. The question I have is how to override the positionClass and show the toast at the bottom right. </p>

<p>I know you can do this in the html using the <code>options</code> but I dont want that in my html. I have 20 crud pages I need to manage. Adding for each page is just not right. So I used the toast as a <code>service</code> and I can use it in the controller of each crud. </p>

<pre><code>     (function() {
        "use strict";

        angular.module("app").factory('ToastService', function($mdToast, toastr) {


            //http://codeseven.github.io/toastr/demo.html
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-bottom-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "6000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };

      return {

                info: function(content, title) {
                    if (!content) {
                        return false;
                    }

                    return toastr.info(content, title, {
                        timeOut: toastr.options.timeOut
                    });
                },


                success: function(content, title) {
                    if (!content) {
                        return false;
                    }

                    return toastr.success(content, title, { timeOut: toastr.options.timeOut});
                },

        error: function(content, title, time) {
            if (!content) {
                return false;
            }
            return toastr.error(content, title, {
                timeOut: time
            });
            //
        },

        };
    });
})();
</code></pre>

<p>In the controller I call it just like this.</p>

<pre><code>  ToastService.error('Connection interrupted!', 'Server Error');
</code></pre>

<p>But instead of the default position at the top right, I want to show it at the bottom right. </p>

<p>Thanks! </p>