AngularJS Nested foreach

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<div ng-app="myApp">
    <div class="nav" ng-controller="FoodsController as vm">
        <div class="level1" ng-repeat="foods in vm.foodGroups">{{foods.Name}}
            <button type="button" ng-click="vm.addNewFood(foods)">add new food</button>
            <div ng-show="foods.newFoodBeingAdded" class="add-new-food">
                <input type="text" placeholer="add a new food">
                <button type="button">save new food</button>
            </div>
            <div class="level2" ng-repeat="food in foods.FoodsInGroup">{{food.Name}}</div>
        </div>
    </div>
</div>

SCSS

body {
    font-family: Helvetica, Arial;
}

.level1 {
    margin-bottom: 15px;
    border: 1px solid #000;
    padding: 5px;
}

.level2 {
    background: #ccc;
    margin-left: 15px;
}

.add-new-food {
    padding: 10px;
    background-color: #FFB6B6;
    margin: 5px;
    margin-left: 0;
}

JavaScript

var app = angular.module('myApp', []);

//app.controller('SubNavController', function ($scope) {})

app.controller('FoodsController', function () {
    var vm = this;
    vm.foodGroups = [{
        "Name": "Grains",
            "FoodsInGroup": [{
            "Name": "Wheat"
        }, {
            "Name": "Oats"
        }]
    }, {
        "Name": "Fruits",
            "FoodsInGroup": [{
            "Name": "Apple"
        }, {
            "Name": "Orange"
        }]
    }];

    //vm.newFoodBeingAdded = false;

    vm.addNewFood = function (foods) {
        foods.newFoodBeingAdded = true;
    };
});