Как закрыть раскрывающееся меню на кнопку отправки?

Question

У меня есть этот html-код для моего установочного окна. При щелчке значка настройки я показываю это. Я использую угловой каркас.

Все работает нормально.

HTML

<!-- Template code for Setting Unit Popup details --> 
<div class="dropdown"> 
    <i class="fa fa-2x fa-fw fa-gear app-margin-top dropdown-toggle" id="dropdownMenu1" data-toggle="popover"></i> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
     <div class="col-md-12" id="settingUnitPopup"> 
      <form class="form-horizontal" role="form"> 
       <div class="form-group custom-border-top"> 
        <div class="col-md-7"> 
         <label>{{'csr:CSR.SERVICE_DETAIL.SETTING_POPUP.VOLUME_UNIT' | i18next}}</label> 
        </div> 
        <div class="col-md-5"> 
         <select class="form-control input-sm" ng-options="volumeUnit.unit as volumeUnit.name for volumeUnit in volumeUnits" ng-model="selectedvolumeUnit"></select> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-7"> 
         <label>{{'csr:CSR.SERVICE_DETAIL.SETTING_POPUP.FLOW_UNIT' | i18next}}</label> 
        </div> 
        <div class="col-md-5"> 
         <select class="form-control input-sm" ng-options="flowUnit.unit as flowUnit.name for flowUnit in flowUnits" ng-model="selectedflowUnit"></select> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-8"> 
         <label>{{'csr:CSR.SERVICE_DETAIL.SETTING_POPUP.TEMP_UNIT' | i18next}}</label> 
        </div> 
        <div class="col-md-4"> 
         <select class="form-control input-sm" ng-options="tempUnit.unit as tempUnit.name for tempUnit in tempUnits" ng-model="selectedtempUnit"></select> 
        </div> 
       </div> 
       <div class="form-group custom-border-top"> 
        <div class="col-md-12"> 
         <button type="button" class="btn btn-primary pull-left" data-ng-click="settingUnit()">{{'csr:CSR.SERVICE_DETAIL.SETTING_POPUP.SUBMIT' | i18next}}</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </ul> 
</div> 

JS код

// setting unit values using local storage on click of submit for the account number 
$scope.settingUnit = function() { 
    $log.log("Setting the unit values"); 
    var mockAccountInfo = [{ 
     volumeUnitsSelected: $scope.selectedvolumeUnit, 
     flowUnitsSelected: $scope.selectedflowUnit, 
     tempUnitsSelected: $scope.selectedtempUnit 
    }]; 
    // Here we are going to set the all set values for the setting popup for the account number 
    localStorage.setItem($scope.csrServiceModel.accountDetails.accountNumber, JSON.stringify(mockAccountInfo)); 

    //angular.element('[class="dropdown-menu"]').hide(); 
}; 

Проблема Я облицовкой: по нажатию кнопки отправки, я хочу, чтобы закрыть элемент, который открывается по настройке значков нажмите ,

Answer 1

Что нужно для использования всплывающего окна bootstrap, см. http://angular-ui.github.io/bootstrap/ ищите Modal (ui.bootstrap.modal). Сохраняйте свой существующий код так, как он есть, и оберните его модальным всплывающим окном.