Q: Angular modal- the modal is displayed from the start and I can't hide it I am new to angular js
I have to open a modal dialog which display some selected value.
Open Modal
    <div modal="showModal" close="cancel()">
        <div class="modal-header">
            <h4>Modal Dialog</h4>
        </div>
        <div class="modal-body">
            <p>E{{inputValue}}</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-success" ng-click="ok()">Okay</button>
            <button class="btn" ng-click="cancel()">Cancel</button>
        </div>
    </div>

The controller for the module which contain the modal is:
 var app = angular.module('myApp', ['ui.bootstrap.modal']);
   app.controller('ctrlTags', function($scope){
       $scope.inputValue=$('input:checked').val()
       $scope.open = function() {
           $scope.showModal = true;
           return $scope.inputValue;
       };

       $scope.ok = function() {
           $scope.showModal = false;
       };

       $scope.cancel = function() {
           $scope.showModal = false;
       };
    });

For some reason the modal is displayed as is it is a regular part of the page (doesn't function as a modal)

A: Toggling a boolean is not how ui-boostrap modals are opened. See documentation. Basically you have to call $uibModal.open with a template:
$scope.open = function() {
    var modalInstance = $uibModal.open({
        templateUrl: 'myModal.html',
        controller: 'ModalInstanceCtrl'
    });
}

Have a look at this plunker where I'm passing a value to the modal, through the resolve property of $uibModal.open.
