angularjs how to route 2 separate controllers on 2 separate pages for same module

Question

I have a main page which has a module, the routing, a factory, and a controller. Below is the first page and after that I've pasted in the second page.

var myApp = angular.module('myApp', ['angularjs-dropdown-multiselect', 'myModule', 'ngMaterial',  'ui.router', 'angularMoment', 'breeze.directives', 'breeze.angular', 'ui.bootstrap.pagination']).run(['breeze', function (breeze) { }]);;
myApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    $urlRouterProvider.otherwise("/Ordering");
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];

    $stateProvider       
        .state('Ordering', {
            url: '/Ordering',
            templateUrl: '/App/js/Ordering/Ordering.html'
        })
    .state('OrderingDetails', {
        url: '/OrderingDetails',
        templateUrl: '/App/js/Ordering/partials/OrderingDetails.html',
        controller: 'QtyUsedDetailsCtrl',
        resolve: {
            fromDate: function ($stateParams) {    
                return $stateParams.fromDate;
            },
        }
    })

});

myApp.config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('blue-grey');
})

.controller('AppCtrl', ['$scope', '$mdSidenav', function ($scope, $mdSidenav) {
    $scope.toggleSidenav = function (menuId) {
        if ($scope.lockedOpen) {
            $scope.lockedOpen = "";
        }
        else {
            $scope.lockedOpen = "md-locked-open";
        }
    };

}])

.controller('OrderingListCtrl', [
    '$scope','$http', '$q', '$filter', '$location', '$window','$state','$stateParams', 'mydatacontext', 'breeze', 'OrderingService',
    function ($scope, $http, $q, $filter, $location, $window, $state, $stateParams, mydatacontext, breeze, OrderingService) {
    }
])

.factory('OrderingService', ['$http','mydatacontext', function ( $http, mydatacontext) {

    function loadDetails(filter) {
        console.log(breeze);

        return $http({
            method: 'GET',
            url: '/FabuServices/Status',
            params: { fromDate: filter.fromDate)
        }).then(function (result)
        { return result.data; })
    };  

}]);

Here is my second page which doesn't seem to recognize the factory from my first page.

'use strict'

angular.module('myApp')

.controller('QtyUsedDetailsCtrl', ['$scope', 'OrderingService', '$stateParams',
function QtyUsedDetailsCtrl($scope, OrderingService, $stateParams) {

    $scope.details = [];
    $scope.test1 = orderingService.test;


    $scope.init = function () {

        $scope.test = OrderingService.test;

        OrderingService.loadDetails($stateParams.fromDate)
       // orderingService.loadDetails('','','')
        .then(function (data) {
            console.log(data);
            $scope.details = data;
        });
    };

    $scope.init();



}]);

ok. so I believe I have narrowed it down to the problem is just the service/factory. when i call that, it breaks everything.

--------------edit! ok, yes a service was helpful, but the actual problem is very silly. I forgot to add the function to my return of the service!!!! Now Can someone post an answer instead of a comment to the remaining problem? $stateParams on the next page is NOT undefined. in the console it says Object (but not expandable object and no details belong to the object). And the variables that are "properties" of $stateParams are undefined. you can see the code in my original post (above this edit).

Answer 1

answer is that you have to include it in the url: in order for $stateparams to know about it.
--I know there may be another option to use params: after the url and pass it in like that, but I couldn't get mine working. The advantage of that is that the url is nice! --Another issue I had which I had to create a formatdate function to bypass, is that the angular or js didn't like when i sent in date objects, so i had to parse them as you can see....

Here is my updated code:

 .state('orderingDetails', {
        // url: '/orderingDetails:fromDate/:toDate',
        url: '/purchasingDetails/{fromDate}/{toDate}',
        templateUrl: '/App/js/ordering/partials/OrderingDetails.html',
        controller: 'QtyUsedDetailsCtrl',
        resolve: {
            details: function (OrderingService, $stateParams) {        
                return OrderingService.loadDetails($stateParams.fromDate,$stateParams.toDate);

and here is my $state.go call:

 $scope.openDetail = function (index) {
        var url = $state.href('orderingingDetails', { fromDate: $scope.formatDate($scope.filter.fromDate) , toDate: $scope.formatDate($scope.filter.toDate)} );            
        window.open(url, '_blank');    
    };