How do i inject this angularjs service

See more:

AngularJs

Hi -

Working with angularjs now and just messing around with first project. I'm getting an unknown provider error. I've looked at the documentation and cant exactly figure out what i'm doing wrong. Actually at this point I've gotten myself confused

Here is the the main controller

(function () {
    "use strict";
    angular
        .module("app", [])        
        .controller("mainCtrl", ["$scope", "myService", mainCtrl]);

    function mainCtrl($scope, myService) {
        var genericObjects =
            [
                { name: "name 1" },
                { name: "name 2" },
                { name: "name 3" },
                { name: "name 4" }
            ];
        $scope.genericObjects = genericObjects;
        $scope.testServiceVariable = myService.MarginAmount(100,80);
    }   

}());

Here is the service

(function () {
    "use strict";
    angular
        .module("app")
        .factory("productService", productService);

    function productService() {
        function MarginPercent(price, cost) {
            var margin = price && cost ? (100 * (price - cost)) / price : 0;
            margin = Math.round(margin);
            return margin;
        }

        function MarginAmount(price, cost) {
            var margin = price && cost ? margin - price : 0;
            return margin;
        }

        return {
            MarginPercent: MarginPercent,
            MarginAmount: MarginAmount
        }

    } //end product service            

}());

What I have tried:

I've been staring at this link https://docs.angularjs.org/error/$injector/unpr?p0=myServiceProvider%20%3C-%20myService%20%3C-%20mainCtrl[^] and switched it around multiple times but keep getting the same error. I've defined the service then passed the service to the function but didn't work either.