How do you add values to an angular resource?

Question

I am having a heck of a time getting what should be simple to work.

I am using ui-router and ngResource. I have a factory that returns the resource.

When I go to the add state the controller has the resource injected and then I do code like:

vm.member = new memberResource(object);

the object has values I want to default in for a new member. However, when the form binds, none of those values are showing in the form.

I even tried doing vm.member.property = 'value' after the above line and that didn't work either.

Here is part of my router config:

  .state('member', {
        url: '/member/:id',
        templateUrl: 'app/memberdetail.html',
        controller: 'MemberDetail',
        controllerAs: 'vm'
    })
    .state('member.add', {
        url: '',
        templateUrl: 'app/memberdetail.html',
        controller: 'MemberCreate',
        controllerAs: 'vm'
    })

Any hints as to what I am doing wrong. Is the problem sharing the template maybe?

I also use this same resource for the member list and to edit members which all seems to work fine.

Needless to say, this is quite frustrating.

Here is the view:

<div class="col-md-6">
<form name="memberEdit" ng-submit="memberEdit.$valid && vm.save()" novalidate>
    <div ng-show="vm.member.id" class="form-group">
        <label for="memberNumber">Member Number</label>
        <input type="text" ng-model="vm.member.memberNumber" name="memberNumber" class="form-control" readonly>
    </div>
    <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" ng-model="vm.member.firstName" name="firstName" class="form-control" placeholder="Enter first Name">
    </div>
    <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" ng-model="vm.member.lastName" name="lastName" class="form-control" placeholder="Enter last Name">
    </div>
    <div class="form-group">
        <label for="dateOfBirth">Date of Birth</label>
        <input type="date" ng-model="vm.member.dateOfBirth" name="dateOfBirth" class="form-control" placeholder="Enter date of birth">
    </div>
    <div class="form-group">
        <label for="emailAddress">Email</label>
        <input type="email" ng-model="vm.member.emailAddress" name="emailAddress" class="form-control" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="cellNumber">Cell Phone Number</label>
        <input type="text" ng-model="vm.member.cellNumber" ui-mask="(999) 999-9999" name="cellNumber" class="form-control">
    </div>
    <div class="form-group">
        <label for="memberType">Membership Type</label>
        <select ng-model="vm.member.memberType" name="memberType" class="form-control">
            <option>Individual</option>
            <option>Family</option>
        </select>
    </div>
    <div class="form-group" ng-hide="vm.member.memberType != 'Family'" required>
        <label for="primaryFamilyMember">Primary Family Member</label>
        <input type="text" ng-model="vm.member.primaryFamilyMember" name="primaryFamilyMember" class="form-control" placeholder="Enter primary family member numer" ng-required="vm.member.memberType == 'Family'">
    </div>
    <div class="form-group">
        <label for="memberLevel">Member Level</label>
        <select ng-model="vm.member.memberLevel" name="memberLevel" class="form-control">
            <option>Blue</option>
            <option>Silver</option>
            <option>Gold</option>
            <option>Platinum</option>
        </select>
    </div>
    <div class="form-group">
        <label for="dateOfExpiry">Expiration Date</label>
        <input type="text" id="dateOfExpiry" ng-model="vm.member.dateOfExpiry" name="dateOfExpiry" class="form-control" placeholder="yyyy-MM-dd">

    </div>
    <div class="checkbox">
        <label>
            <input ng-model="vm.member.isActive" name="isActive" type="checkbox">
            Active
        </label>
    </div>
    <button ng-disabled="memberEdit.$invalid" type="submit" class="btn btn-primary">Save</button>
</form>    

Controller:

function MemberCreate($state, $stateParams, memberResource) {
    var vm = this;

    vm.member = new memberResource({
        firstName: 'Test',
        isActive: false,
        memberLevel: 'Gold',
        memberType: 'Individual',
        dateOfExpiry: new Date().setHours(0, 0, 0, 0),
        cellNumber: '4015551212'
    });

    vm.save = save;

    function save() {
        vm.member.$save(function () {
            // TODO: Toster alert
            $state.go('member', { id: vm.member.id });
        });
    };
};