<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
    <script data-require="ng-file-upload@*" data-semver="4.0.0" src="https://raw.githubusercontent.com/danialfarid/ng-file-upload/master/dist/ng-file-upload-all.js"></script>
    <script data-require="ng-file-upload-shim.min.js@*" data-semver="7.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/7.2.0/ng-file-upload-shim.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>You can see that {{angular}} isn't working.</h1>
    <p>If you remove the 'ngFileUpload' part from the dependencies list then it works again.</p>
    <p>So I can't even get it to work in here, with no other modules.</p>
    <form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
      <input type="file" ng-model="myFile" ngf-select="uploadMyFile()">
    </form>

  </body>
</html>

var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    // upload later on form submit or something similar
    $scope.angular = "AngularJS";
    
    $scope.uploadMyFile = function() {
      console.log('testing this out');
    }
}]);
/* Styles go here */