Ionic/AngularJS Button only clicked from bottom and model not showing up

I am a newbie to Angular and Ionic and programming in general. I was trying to develop a small phone app and I ran into 2 problems. Here is the codepen of my code: http://codepen.io/anon/pen/stobI

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
  </head>
  1. The Search for a Restaurant button on the add tab is only working when you click on the very bottom of the button and I have no idea why that is happening.
  2. After clicking the Search for a Restaurant button, the restaurantquery variable is coming out as undefined in the searchRest function.

If someone could give me a few tips on how to solve these issues that would be great

I have created create a codepen of this issue working you can find it here: http://codepen.io/anon/pen/gBobu. Below is what I found to be the solutions to each of the problems you encounted.

  1. The button to search for a restaurant didn't appear to be entirely click-able due to the div above it being a list of items in the ionic framework. After applying the 'item' class to the button it correctly displayed and was click-able again.

  2. With this problem it appears to be because the $ionicModal has a isolated scope from that of the controller, when the value is being updated it wasn't being updated on the $scope of the controller. In the controller I amended the restaurantQuery to what is shown below.

    myapp.controller('mainCtrl', function($scope, $ionicModal, $http, $scope) { $scope.restaurantQuery = { name: "" }; $scope.searchRest = function() { console.log($scope.restaurantQuery.name); } });

Then in the HTML markup I changed the property that bound to the input to this newly amended property.

<input ng-model="restaurantQuery.name" type="text" placeholder="Search">

It seems that objects on the scope are shared more easily than string values. However I'm not entirely sure on why this happens in angular.

I hope this helps to resolve the problems.

Please end the tag "/ion-content", previously it was like "ion-content" after closing it will work properly.

 <script id="add.html" type="text/ng-template">
  <ion-view title="Add A Review">
    <ion-content class="padding">
      <div class="list list-inset">
        <label class="item item-input">
          <textarea type="text" placeholder="Review"></textarea>
        </label>
      </div>
      <button class="button button-positive item" ng-click="findRest()">
        Search for a Restaurant
      </div>
   </ion-content> 
  </ion-view>

</script>