How to define dependencies correctly for third-party libraries in AngularJS

Question

How to define dependencies correctly for third-party libraries in AngularJS

I would like to integrate 'toastr' library(https://github.com/CodeSeven/toastr) and cannot understand how to use it in angular.

When I try to define dependencies in my service, I receive the followinf error message:

Error: error:unpr
Unknown Provider
Unknown provider: toastrProvider

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="icon" type="image/png" href="assets/images/favicon.ico">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <title>Todo App</title>

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
    <script src="app.js"></script>
    <script src="app.routes.js"></script>
    <script src="app.constants.js"></script>
    <script src="blocks/logger.js"></script>
    <script src="todo/todo.controller.js"></script>
    <script src="todo/todo.factory.js"></script>

</head>

<body ng-app="app">

<section id="main">
    <div class="container">
        <ng-view></ng-view>
    </div>
</section>

</body>
</html>

logger.js

'use strict'

angular
    .module('app')
    .factory('logger', logger);

logger.$inject = ['$log', 'toastr'];

function logger($log, toastr) {
    var service = {
        showToasts: true,

        error: error,
        info: info,
        success: success,
        warning: warning,

        log: $log.log
    }

    return service;

    function error(message, data, title) {
        toastr.error(message, title);
        $log.error('Error: ' + message, data);
    }

    function info(message, data, title) {
        toastr.info(message, title);
        $log.info('Info: ' + message, data);
    }

    function success(message, data, title) {
        toastr.success(message, title);
        $log.success('Success: ' + message, data);
    }

    function warning(message, data, title) {
        toastr.warning(message, title);
        $log.warning('Warning: ' + message, data);
    }
}

If I will remove 'toastr' dependency and all toastr method calls, app will work fine. What I do wrong using third-party libraries in AngularJS?

angularjs