Content directive causes odd child scope?


I’m getting an odd child-scope issue, with the following html view:

<content has-header="true" scroll="true" padding="true">
    <div id="search-bar">
        <div class="item item-input-inset">
            <label class="item-input-wrapper" id="search-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="text" placeholder="Search" id="search" ng-model="request" ng-change="search();" />
    <h1>Hello World</h1>
    <p ng-repeat="result in results">{{}}</p>

When search() function runs, it has no idea what $scope.request is, it becomes undefined. Looking at the scopes through batarang I noticed it’s showing as a child scope. Is that expected? Seems like I should be able to access $scope.request without having to dig through scopes.

If I remove the <content> directive, then the scopes align and are accessible. However I lose the styling associated with the directive.

Here is the code from my controller, It’s taken from the Flickr example app where it works fine:

    var doSearch = ionic.debounce(function(query) {
    }, 500);

    $ = function() {


Not a good solution, but this is getting me around this issue:

    _.extend($scope, {
        headerTitle: 'Drinks',
        results: [],
        request: 'Beer'

    var doSearch = ionic.debounce(function(query) {
            .success(function(response) {
                $scope.results = response.result;
    }, 500);

    $ = function() {

    $scope.init = function() {


Not sure why I have to go to the private $$childTail to find the request scope. The init $scope.request = 'Beer' works fine on load, but then the scope gets skewed somehow and ends up in a child scope.


@neilff, try making @scope.request an object:

$scope.request = {}, then set a field as the ngModel:

<input ng-model="request.query">

Let me know if that works for you.


@max Thanks that resolved the issue