<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Open Fileupload Dialog Sample(angularjs ver 1.2.12)</title>

    <link href="css/app.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>    <script src="js/controllers.js"></script>    
  </head>

  <body ng-controller="MainCtrl">
      
    <h1>Open Fileupload Dialog Sample(angularjs ver 1.2.12)</h1>
        <div>
            <button class="button icon ion-filing" ng-click="openFileDialog()">openFileDialog</button>
            <div id="filename">open file name:{{ fileName }}</div>
        </div>            
        
        <input type="file" id="file"/>
  
  </body>
</html>
#file {
  display:none;
}
//angular.module('app', ['ionic'])
angular.module('app', [])

    .controller('MainCtrl', function($scope) {
      
        $scope.fileName='nothing';
        
        $scope.openFileDialog=function() {
            console.log('fire! $scope.openFileDialog()');
            angular.element('#file').trigger('click');
        };

      
        angular.element('#file').on('change',function(event) {
            console.log('fire! angular#element change event');
           
            var file = event.target.files[0];
            $scope.fileName=file.name;
            $scope.$apply();
        });
  
    });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.