# Problem with ion-content and scope vars inside function

**URL:** <https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811>\
**Category:** ionic-v1\
**Created:** [March 13, 2014, 12:04am UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811 "2014-03-13T00:04:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![igmakis](https://avatars.discourse-cdn.com/v4/letter/i/5e9695/32.png) [@igmakis](https://forum.ionicframework.com/u/igmakis)\
**Post date:** [March 13, 2014, 12:04am UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/1 "2014-03-13T00:04:23Z")

</div>

Hi,

scope variables are undefined inside controller function if input field with ng-model is inside ion-content.

If I place the same input field outside ion-content, everything works as expected.

I think I maybe missing something because if I recall properly several versions back that worked as it should.

Please help.

Thanks

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [March 13, 2014, 4:33am UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/2 "2014-03-13T04:33:53Z")

</div>

I’m guessing it’s because you aren’t using “dot notations”.

```auto
$scope.volume = 5

```

You need to use :

```auto
$scope.data = { 'volume' : 5}

```

Definitive Resource : [https://github.com/angular/angular.js/wiki/Understanding-Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes)

---

<div class="post-metadata">

**Author:** ![igmakis](https://avatars.discourse-cdn.com/v4/letter/i/5e9695/32.png) [@igmakis](https://forum.ionicframework.com/u/igmakis)\
**Post date:** [March 13, 2014, 5:08am UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/3 "2014-03-13T05:08:43Z")

</div>

Thank you for your answer. But I’m still a bit confused, and probably wasn’t clear enough. Here is the simple code that worked for me quite nice until put into ion-content directive.  
In the controller:

```
$scope.clickMe = function(){
     console.log( $scope.someVar );
};

```

And in the ion-content:

```
<input type="text" ng-model="someVar" />
<button class="button" ng-click="clickMe()">Click</button>
{{someVar}}

```

Now what’s interesting is that writing in a field immediately binds on screen, but clicking on a button yields  
undefined in a console.  
Further, what’s confusing me is that this behavior manifests only if input field is inside **ion-content** directive, but if you put everything out, even in a sub-header for example, it works quite as I expected.

I’m relatively new to whole angular + ui-router + ionic stack so please bare with me, but this is really confusing.  
I still have a feeling that I’m missing something, but I’m not sure because it behaves differently in different view directives.

Thank you for your patience,

Igor

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [March 13, 2014, 1:20pm UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/4 "2014-03-13T13:20:12Z")

</div>

The problem is specific with `ion-content` because of the way this directive is defined in the Ionic source code. It specifically creates it’s own child scope.

```auto
.directive('ionContent', [
  '$parse',
  '$timeout',
  '$ionicScrollDelegate',
  '$controller',
  '$ionicBind',
function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    require: '^?ionNavView',
    scope: true,
    template:
    '<div class="scroll-content">' +
      '<div class="scroll"></div>' +
    '</div>',

```

Because of this and the way inheritance works in JavaScript, you cannot use 2 way binding. Basically your `$scope.clickMe` is defined in you controller and is just created as a new primitive to the scope of `ion-content`. It is not copied by reference like an object would be.

Reread that article I linked to. It’s critical in understanding how this all works and overcoming these issues.

---

<div class="post-metadata">

**Author:** ![stefek99](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@stefek99](https://forum.ionicframework.com/u/stefek99)\
**Post date:** [April 11, 2014, 4:07pm UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/5 "2014-04-11T16:07:11Z")

</div>

> [@Calendee](#):
>
> It’s critical in understanding how this all works and overcoming these issues.

I wonder if there is a quick fix: [Plunker - Untitled](http://plnkr.co/edit/Z8YIAF9Wh2hrk7eWnzJX?p=preview)

```
    $scope.add = function(item) {
      alert("adding " + item + " but due to isolated scopes cannot clear search field");
      
      $scope.searchText = "";
    }

```

I have a list and search field sitting in **ion-content** and I would like to clear the filter after adding the item.

Possible?  
(Thanks)

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [April 11, 2014, 7:54pm UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/6 "2014-04-11T19:54:43Z")

</div>

“dot notation” saves the day : [http://plnkr.co/edit/2ZNeHRmYQ1cE3zWLpo2X?p=preview](http://plnkr.co/edit/2ZNeHRmYQ1cE3zWLpo2X?p=preview)

---

<div class="post-metadata">

**Author:** ![stefek99](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@stefek99](https://forum.ionicframework.com/u/stefek99)\
**Post date:** [April 12, 2014, 11:16am UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/7 "2014-04-12T11:16:57Z")

</div>

Of course: [http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=share&t=30m51s](http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=share&t=30m51s)

_(Misko Hevery AngularJS Best Practices)_

---

<div class="post-metadata">

**Author:** ![clickonchris](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/clickonchris/32/73675_2.png) [@clickonchris](https://forum.ionicframework.com/u/clickonchris)\
**Post date:** [February 19, 2015, 10:26pm UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/8 "2015-02-19T22:26:14Z")

</div>

This is an old topic but still relevant.

I was able to get around the problem by binding my inputs to $parent.someModel.

So in the example above, changing the view to

```
<input type="text" ng-model="$parent.someVar" />
<button class="button" ng-click="clickMe()">Click</button>
{{someVar}}

```

Will allow you to properly bind the input box to the $scope from your controller as expected.

---

<div class="post-metadata">

**Author:** ![jmap](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jmap/32/90722_2.png) [@jmap](https://forum.ionicframework.com/u/jmap)\
**Post date:** [August 9, 2015, 7:17pm UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/9 "2015-08-09T19:17:34Z")

</div>

This worked perfectly and was all that was needed. Thanks!

---

<div class="post-metadata">

**Author:** ![Boboy](https://avatars.discourse-cdn.com/v4/letter/b/22d042/32.png) [@Boboy](https://forum.ionicframework.com/u/Boboy)\
**Post date:** [September 28, 2015, 11:16am UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/10 "2015-09-28T11:16:06Z")

</div>

hia thanks for your solution it saves my time so much

---

<div class="post-metadata">

**Author:** ![Sylvesterpious](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sylvesterpious](https://forum.ionicframework.com/u/Sylvesterpious)\
**Post date:** [January 15, 2016, 10:30pm UTC](https://forum.ionicframework.com/t/problem-with-ion-content-and-scope-vars-inside-function/1811/11 "2016-01-15T22:30:06Z")

</div>

This fixed an issue on which i spent close to 3 hrs. Thanks a lot.