AngularJs Lazy Loadng without RequireJS

In a large scale application, How do we lazy load modules, controllers, services whenever needed without loading those in the index.html. Here I'm referring to load the entire js in the relevant template html and not in the index.html. (It could be different js which has Module, multiple controllers, services, directives for a given functionality or individual js files which has multiple controllers or services)

I do not want to use RequireJs. However, I'm looking for a solution within angular itself.

angular.module( 'my-second-module', ['ui.router'])

.config(function config($stateProvider) {
    $stateProvider
        .state('mainscreen', {
            url: "/mainscreen",
            templateUrl: "app/MyMain.tpl.html"
        })
        .state('mainscreen.sub', {
            url: "/sub",
            controller: 'subCtrl',
            templateUrl: "app/sub.tpl.html"
        })
})
.controller( 'subCtrl', function contractCtrl
    ($scope,$http,$route,$location) {
})
.controller( 'subTwoCtrl', function newContractCtrl($scope,someService,$http,$templateCache) {
.filter('myTypeFilter',function(){
    return function (input,value){       
        return 'Normal';
   };
})
.service('newService', function () {
    var selectedContract = [];
    var hotelObject=[{}];
    return {
        notes:function () {
        },
        addNote:function (noteTitle) {
        }
    };
})
.directive('autocomplete', function($parse) {
return function(scope, element, attrs) {
    var setSelection = $parse(attrs.selection).assign;
    scope.$watch(attrs.autocomplete, function(value) {
        element.autocomplete({
            source: value,
            select: function(event, ui) {
                setSelection(scope, ui.item.value);
                scope.$apply();
            }
        });
    });
};
})
.factory('restService', function(commonService) {
return {
    setReturnMessage: function(res) {
};
})
});