how to add data to restful rails backend from angular JS?

i have an basic sample app with angular JS fron end and Rails backend connected through rails API.this app just view and inserts name into the backend. but somehow i'm not able to pass the params into the backend.

here is my code

app.js

'use strict';

/**
 * @ngdoc overview
 * @name fakeLunchHubApp
 * @description
 * # fakeLunchHubApp
 *
 * Main module of the application.
 */
var app = angular.module('fakeLunchHubApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ]);

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl'
    })
    .when('/groups', {
      templateUrl: 'views/groups.html',
      controller: 'GroupsCtrl'
    })
    .when('/contact', {
      templateUrl: 'views/contact.html',
      controller: 'GroupsCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
});

app.factory('Group', ['$resource', function($resource) {
  return $resource('/api/groups/:id.json', null, {
    'update': { method:'PUT' }
  });
}]);

groups.js(controller)

'use strict';

/**
 * @ngdoc function
 * @name fakeLunchHubApp.controller:GroupsCtrl
 * @description
 * # GroupsCtrl
 * Controller of the fakeLunchHubApp
 */
angular.module('fakeLunchHubApp')
  .controller('GroupsCtrl', ['$scope', 'Group', function ($scope, Group) {
    $scope.groups = Group.query();
    $scope.name={}
    $scope.newName = function() {
    var post = new Group($scope.groups);
    post.$save();
  };

  }]);

groups.html

<h1>Groups</h1>
<form ng-submit="newName()">
<input type="text" data-ng-model="groups.name"/> 
<button type="submit" class="btn btn-info" data-ng-click="newName()">Insert</button>
</form>
<ul ng-repeat="group in groups | orderBy:'name'">
  <li><a>{{group.name}}</a></li>
</ul>