My code has following structure:

1. main.html - loads all modules - declares ng-app and main controller - contains div tag-load-div


2. file1.html ... (all other html files) - contain only <div> / child tags and are loaded into a load-div which is in main.html on events such as click

now in one such file say file3.html, I have a checkbox. onclick of that checkbox I want to open a modal window - a form that will be submitted. Now here is my code

file3.html

    <div>

        <input type=checkbox name=your-group value=unit-in-group onclick=toggleModal();/>Unit-in-group

        <modal title=some title visible=showModal>

            <form role=form>

                <div class=form-group>

                    <label for=email>Email address</label>

                    <input type=email class=form-control id=email placeholder=Enter email />

                </div>

                <div class=form-group>

                    <label for=password>Password</label>

                    <input type=password class=form-control id=password placeholder=Password />

                </div>

                <button type=submit class=btn btn-default>Submit</button>

            </form>

        </modal>

    </div>

now I have written follwing code in the main main controller declared in main.hml

$scope.showModal = false;

  $scope.toggleModal = function(){

    $scope.showModal = !$scope.showModal;

 };

The expected behaviour is when my file3 is loaded I will see a check box on the screen and as I click it, it will open a modal window but instead I see modal form fields on the same page where I see checkbox. and when I click it I get angular exception that showModal is not defined.

Where am I going wrong?