How to invoke directive after file selection in co

问题:

I want to display progress bar when user select file size from dropdown and click on startRecording then i want to invoke directive. So i am trying to hide progressbar initially and on file selection displaying a progressbar because its based on file selection i have a lot of logic in directive controller that is being executed. User should select file size first then progressbar directive should invoked. How can i acheive that task ?

ctrl.js

  $scope.startRecording = function () {
        $scope.progressBarFlag = true;
    }

directive.js

angular.module("App").directive('progressBarCustom', function() {
            return {
                restrict: 'E',
                scope: {
                    message: "="
                },
                templateUrl: '/view/partials/progressbar.html',
                controller: function($scope) {
                    var data = $scope.message;
                  $scope.progressBarFlag = false;
                    var currentFileBytes = [];
                    var currentBytesSum;
                    $scope.maxBytes = 3000;
                    $scope.max = $scope.maxBytes;
                    $scope.FileSizeString = $scope.selectedFileSize.value;

                }
            });

main.html

      <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                    <div class="col-md-3">
                        <label>Select File Size</label>
                    </div>
                    <div class="col-md-3">
                        <select class="form-control" ng-model="selectedFileSize"  ng-options="item as item.value for item in FileSizeOptions" ng-change="onSizeChange()"><option value="">Select</option></select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary"  ng-click="startRecording()">Start Recording</button>
                    </div>
                </div>
            </div>
        </div>
<progress-bar-custom message="event"  fileSize="selectedFileSize.size" fileValue="selectedFileSize.value"></progress-bar-custom>

progressbar.html

<div class="row" ng-show="progressBarFlag">
    <div class="col-md-9">
             <uib-progressbar type="success" class="progress-striped" max="max" animate="true" value="dynamic"><span>{{downloadPercentage}}%</span></uib-progressbar>
        <p class="pull-right bytes-progress-0"><small>Recorded <strong>{{currentBytes}}</strong> of <strong>{{FileSizeString}}</strong></small></p>
    </div>
</div>