Angular UI

[overwraith]

I need some help building a bootstrap Angular UI modal. This is what I have so far, but I am pretty sure it is wrong. Any assistance would be good. This actually appears to be doing mostly bootstrap stuff. It was originally jquery, but I figured out the hard way that jquery does not mix with Angular Js well.

        <div id="excelModal" modal="excelModal" close="cancel()" hidden>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" hidden>&times;</button>
                        <h4 class="modal-title">Excel Upload</h4>
                    </div>
                    <div class="modal-body">
                        <p>Please upload an excel file that contains the data you are wishing to include in the report parameters.</p>
                    </div>
                    <div class="modal-footer">
                        @using (Html.BeginForm("UploadExcel", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @role = "form" })) {
                            <div class="form-group">
                                <label for="excelFile">Excel File:</label>
                                <input id="excelFile"
                                       class="form-control"
                                       name="excelFile"
                                       type="file" />
                                <button class="btn btn-primary form-control btn-success"
                                        type="button"
                                        data-dismiss="modal"
                                        ng-click="ExcelUpload()" hidden>
                                    Submit
                                </button>
                            </div>
                        }
                        <button type="button" class="btn btn-primary" ng-click="close()" data-dismiss="modal" hidden>Close</button>
                    </div>
                </div>
            </div>
        </div>

[overwraith]

Ok, this was a bear. You have to create a static html folder in your mvc project, and dump your bootstrap modal inside it. The static html folder is bootstrap classes etc. This utilizes @Scripts.Render("~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"), aka UI Bootstrap.

<div class="modal-header">
    <h4>Excel Upload</h4>
</div>
<div class="modal-body">
    <p>Please upload an excel file that contains the data you are wishing to include in the report parameters.</p>
</div>
<div class="modal-footer">
    <form id="UploadExcel" class="form-horizontal" action="/Home/UploadExcel" enctype="multipart/form-data" method="post">
        <div class="form-group">
            <label for="excelFile">Excel File:</label>
            <input id="excelFile"
                   class="form-control"
                   name="excelFile"
                   type="file" />
            <span class="input-group-addon">
                <button class="btn btn-primary form-control btn-success"
                        type="button"
                        ng-click="ExcelUpload()" hidden>
                    Submit
                </button>
            </span>
        </div>
    </form>
</div>

I am redacting a little bit of my code for clairity, but these methods would appear in your mvc controller.

    $scope.CallExcelModal = function (ctTemplate) {
        //set the current template we are working on
        $scope.ctTemplate = ctTemplate;
        $scope.excelModal();
    };

    $scope.excelModal = function () {
        $uibModal.open({
            templateUrl: '/Static/Modal.html',
            scope: $scope, 
            controller: function ($scope, $uibModalInstance) {
                $scope.ExcelUpload = function () {
                    try {
                        console.log("Excel Upload...");
                        //preform excel file upload. 
                    }
                    catch (err) {
                    }
                    finally {
                        console.log("Hide modal...");
                        //hide the modal. 
                        $uibModalInstance.close();
                    }
                };
            }
        })
    };