Implement simple angularjs file upload

Question

I am trying to implement a simple Angular file upload. I am already having a controller for that particular page as shown below:

    app.controller('PageCtrl', function ($scope, $rootScope, $location, $routeParams, services, video) {


   var videoID = ($routeParams.videoID) ? parseInt($routeParams.videoID) : 0;

      var original = video.data;
      original._id = videoID;
      $scope.video = angular.copy(original);
      $scope.video._id = videoID;
      $scope.isClean = function() {
        return angular.equals(original, $scope.video);
      }


    // Activates the Carousel
    $('.carousel').carousel({
      interval: 5000
    });

    // Activates Tooltips for Social Links
    $('.tooltip-social').tooltip({
      selector: "a[data-toggle=tooltip]"
    })
  });

My HTML looks like this

<div class="form-group">
                        <label class="col-md-4 control-label" for="Message">Message</label>
                        <div class="col-md-4">                     
                        <textarea class="form-control" id="Message" name="Message">Hi David...</textarea>
                        </div>
                        </div>

                        <!-- Multiple Checkboxes -->
                        <div class="form-group">
                        <label class="col-md-4 control-label" for=""></label>
                        <div class="col-md-4">
                        <div class="checkbox">
                        <label for="-0">
                          <input ng-model="imagesModal" type="checkbox" name="" id="-0" value="1">
                          Upload Images
                        </label>
                        </div>
                        </div>
                        </div>

                        <!--Images Form Group-->
                        <div class="form-group" ng-show="imagesModal">
                                <input type="file" ng-file-select="onFileSelect($files)" >
                        </div>

                        <!-- Button -->
                        <div class="form-group">
                        <label class="col-md-4 control-label" for="Submit"></label>
                        <div class="col-md-4">
                        <button id="Submit" name="Submit" class="btn btn-primary">Submit</button>
                        </div>
                        </div>

I am trying to include Angular file upload controller as shown in the answer. I tried

app.controller('PageCtrl', ['$scope', '$upload', function ($scope, $rootScope, $location, $routeParams, services, video) {


   var videoID = ($routeParams.videoID) ? parseInt($routeParams.videoID) : 0;

      var original = video.data;
      original._id = videoID;
      $scope.video = angular.copy(original);
      $scope.video._id = videoID;
      $scope.isClean = function() {
        return angular.equals(original, $scope.video);
      }
    $scope.onFileSelect = function($files) {
    var file = $files[0];
    if (file.type.indexOf('image') == -1) {
         $scope.error = 'image extension not allowed, please choose a JPEG or PNG file.';            
    }
    if (file.size > 2097152){
         $scope.error ='File size cannot exceed 2 MB';
    }     
    $scope.upload = $upload.upload({
        url: upload.php,
        data: {fname: $scope.fname},
        file: file,
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      });
    };

    // Activates the Carousel
    $('.carousel').carousel({
      interval: 5000
    });

    // Activates Tooltips for Social Links
    $('.tooltip-social').tooltip({
      selector: "a[data-toggle=tooltip]"
    })
  }]);

I am getting . I tried declaring all the parameters too

app.controller('PageCtrl', ['$scope', '$upload', '$rootScope', '$location', '$routeParams', function ($scope, $rootScope, $location, $routeParams, services, video) {

But still the same error. So I removed all the declaration too. No use. I have been struggling with it for the long time now. I am just starting with angular. No clue where I am wrong.

UPDATE:

var app = angular.module('videomandiApp', [
  'ngRoute','youtube-embed','ngFileUpload'
]);



  <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
           <script src="js/ng-file-upload.min.js"></script>
        <script src="js/ng-file-upload-shim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>
<script src="http://brandly.github.io/angular-youtube-embed/angular-youtube-embed.js"></script>


        <script src="js/main.js"></script>