# Modal for login - didn't use controller always

**URL:** <https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299>\
**Category:** ionic-v1\
**Created:** [January 2, 2016, 1:14pm UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299 "2016-01-02T13:14:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Driesel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/driesel/32/12754_2.png) [@Driesel](https://forum.ionicframework.com/u/Driesel)\
**Post date:** [January 2, 2016, 1:14pm UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/1 "2016-01-02T13:14:39Z")

</div>

Hey guys,

I use the backand-app from ionic market.  
Now i try to have the login as a modal. On standard i have a login-tab, where user could do the login. But this is not really nice, so i want to do it with a modal and remove the login-tab.

So i got the following **structure** :  
4 tabs:

- \*dashboard \*(with a button to open the modal)
- _objects_ (with a button to open the modal)
- _login_ (with a button to open the modal)
- _signup_

And now the **problem** :  
The modal opens on every site, when i click the button. But it only uses the controller, when i open it on site/tab _login_. When i open the modal on _dashboard_ or _objects_, it didn’t use the controller and the buttons in the modal for login (for example social login for facebook) do nothing.  
I think it is a controller problem.

I uploaded the files to git:  
[https://github.com/AndreDriesel/ionic-backand-app](https://github.com/AndreDriesel/ionic-backand-app)

Do you have any idea why it doesn’t work?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [January 7, 2016, 6:42am UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/2 "2016-01-07T06:42:18Z")

</div>

because you define the modal content in your index.html (so for all states).  
But only the login-tab state is connected with the login controller, where your modal is built and connected to the the scope of the login-tab --\> if you want to access the login modal you should move the modal creation and modal functions in an own controller and add this controller in the modal-template via ng-controller, or put everything in an base controller… which is around all other states.

---

<div class="post-metadata">

**Author:** ![Driesel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/driesel/32/12754_2.png) [@Driesel](https://forum.ionicframework.com/u/Driesel)\
**Post date:** [January 7, 2016, 7:33am UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/3 "2016-01-07T07:33:46Z")

</div>

Thanks for the fast reply!

Okay so i got two oppurtunities:

1. put ng-controller=“loginCtrl” in \< body\>
2. put ng-controller=“loginCtrl” in modal template

* * *

1. base controller in \< body\> will firing in every site/state, right?
2. where do i have to add ng-controller?

\< script id=“contact-modal.html” type=“text/ng-template” **ng-controller=“loginCtrl”** \>  
\< div class=“modal” \>  
\< ion-header-bar\>  
…  
Is this right?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [January 7, 2016, 9:18am UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/4 "2016-01-07T09:18:00Z")

</div>

nope you should put it on the tag --\>  
[http://ionicframework.com/docs/api/service/$ionicModal/](http://ionicframework.com/docs/api/service/%24ionicModal/)

---

<div class="post-metadata">

**Author:** ![Driesel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/driesel/32/12754_2.png) [@Driesel](https://forum.ionicframework.com/u/Driesel)\
**Post date:** [January 7, 2016, 1:59pm UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/5 "2016-01-07T13:59:44Z")

</div>

I really see no difference between the ionic example code from the docs and my code on git. 😕

> [@bengtler](#):
>
> add this controller in the modal-template via ng-controller, or put everything in an base controller

Where have they added the controller in the docs example?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [January 7, 2016, 3:20pm UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/6 "2016-01-07T15:20:35Z")

</div>

in the docs —\> the modal is created in a controller --\> and the modal gets the scope of the controller. This scope holds all methods and functionalities the modal needs.

In your case all you functionality of the login-tab-view is in the login-tab-controller. You need to create your modal somewhere ‘globally’ like in a base controller. There you can put all the functionality of your tabs-login controller OR you can add the login-tab-controller to your modal manually (it will get an isolated scope) with ngController.

---

<div class="post-metadata">

**Author:** ![Driesel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/driesel/32/12754_2.png) [@Driesel](https://forum.ionicframework.com/u/Driesel)\
**Post date:** [January 9, 2016, 8:46pm UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/7 "2016-01-09T20:46:09Z")

</div>

In theory I understand what you mean, but I fail in the field.  
I have tried to put my script in the index.html into a **\< div ng-controller=“LoginCtrl”\>** , but this doesn’t work.  
And i have searched for some code snippets and tutorials for global controllers or social login modals, but didn’t really found some useful sites.  
Do you know any snippets or tutorial, which could help me solving this problem?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [January 11, 2016, 6:46am UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/8 "2016-01-11T06:46:14Z")

</div>

Please create a codepen with your current code.  
I will look into it and change it.

---

<div class="post-metadata">

**Author:** ![Driesel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/driesel/32/12754_2.png) [@Driesel](https://forum.ionicframework.com/u/Driesel)\
**Post date:** [January 17, 2016, 7:33pm UTC](https://forum.ionicframework.com/t/modal-for-login-didnt-use-controller-always/40299/10 "2016-01-17T19:33:14Z")

</div>

first i would thank you for your help 😄

here is the code on codeine: (woohoo, my first pen)  
[Codepen - modal example](http://codepen.io/AndreDriesel/pen/rxzYpR/)

Everything works fine.  
I just got one question:

I open the Modal with a global Controller. Is it possible the have an separate Controller for the controller itself? So open with GlobalCtrl, but functions from ModalCtlr?
