title: angularjs in rails:add data to database and show without reloading
body: <p>In a rails project, I add data to database by <code>http.post</code> from angularjs controller. I have below code to do this:</p>
  
  <p><code>RestaurantIndexCtrl.js.coffee</code>:</p>
  
  <pre><code>restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) -&gt;
  $scope.restaurants = []
    $http.get('./restaurants.json').success((data) -&gt;
      $scope.restaurants = data
    )
    $scope.addRestaurant = (test) -&gt;
      $http({
        url: '/restaurants#create',
        method: "POST",
        data: JSON.stringify({name:test}),
        headers: {'Content-Type': 'application/json'}
      })
  
  ]
  </code></pre>
  
  <p><code>templates/restaurants/index.html</code>:</p>
  
  <pre><code>&lt;form ng-submit="addRestaurant(restaurant.name)"&gt;
      &lt;input type="text" ng-model="restaurant.name"&gt;
      &lt;button&gt;Register&lt;/button&gt;
  &lt;/form&gt;
  &lt;ul ng-repeat="restaurant in restaurants"&gt;
      &lt;li&gt;&lt;a ng-click="viewRestaurant(restaurant.id)"&gt;{{ restaurant.name }}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And below code in rails project:
  <code>restaurants_controller.rb</code>:</p>
  
  <pre><code>def create
      @restaurant = Restaurant.new(restaurant_params)
  
      respond_to do |format|
        if @restaurant.save
          format.html { redirect_to @restaurant, notice: 'Restaurant was successfully created.' }
          format.json { render action: 'show', status: :created, location: @restaurant }
        else
          format.html { render action: 'new' }
          format.json { render json: @restaurant.errors, status: :unprocessable_entity }
        end
      end
    end
  </code></pre>
  
  <p>Now, when I comlete the <code>textfield</code> and post data to rails project, data aren't add to database until I refresh the page. When I refresh, data is add to database and show data on <code>index.html</code>.</p>
  
  <ol>
  <li><p>I want when I copmlete the <code>textfield</code> and post to rails controller by angularjs, new data are add to database and show on <code>index.html</code> without reloding. How can I do this? The problem is exist in rails controller or angularjs code? </p></li>
  <li><p>I set <code>unique validation</code> for <code>restaurant name</code>, now if I send a name that exist in database, rails controller doesn't permit to add data to database. How can I get error that rails generate and show to user in <code>angularjs</code> html code?</p></li>
  </ol>
  
  <p><code>Note</code>: I use external view for angularjs and put templates in <code>public</code> folder and then route the url by <code>ngRoute</code>.</p>
  
  <p><code>main.js.coffee</code>:</p>
  
  <pre><code>@restauranteur = angular.module('restauranteur', ['ngRoute'])
  
  @restauranteur.config(['$routeProvider', ($routeProvider) -&gt;
    $routeProvider
    .when('/restaurants', {
      templateUrl: '../templates/restaurants/index.html',
      controller: 'RestaurantIndexCtrl'
    })
      .otherwise({
          templateUrl: '../templates/home.html',
          controller: 'HomeCtrl'
        })
  ])
  </code></pre>