Angular preserve state

characters-details.html

<div ng-controller="CharacterDetailCtrl">
  <form>
    <div>Name: <input ng-model="character.name"></div>
    <div>Actor: <input ng-model="character.actor"></div>
    <div>Image URL: <input ng-model="character.imageUrl"></div>
    <div>
      <input type="submit" ng-click="save(character)" value="save">
      <input type="submit" ng-click="delete(character)" value="delete" ng-show="character._id">
    </div>
  </form>

  <div><img class="character" ng-src="{{character.imageUrl}}"></div>
  <pre>{{character | json}}</pre>
</div>

characters.coffee

# TODO hide edit list on save
# TODO use router / urls instead of directly setting the details? 
# TODO make sure new works 
# TODO only activate delete button when appropriate

# filters an array by id
findById = (id, list) ->
  if not id? then return
  matching = list.filter (item) -> item._id is id
  return matching[0]


window.CharacterListCtrl = ($scope, Characters, CharactersState, $routeParams) ->

  $scope.characters = Characters.query ->
    characterId = $routeParams.id

    if characterId is "new"
      CharactersState.selected = {}
    else
      CharactersState.selected = findById characterId, $scope.characters

  $scope.state = CharactersState
  $scope.order = "natural"

  $scope.delete = (character) ->
    Characters.remove {_id: character._id}, ->
      $scope.characters = Characters.query()


window.CharacterDetailCtrl = ($scope, $routeParams, Characters, CharactersState) ->
  characterId = $routeParams.id

  Object.defineProperty $scope, "character",
    get: -> CharactersState.selected

  # if characterId isnt "new"
  #   $scope.character = Characters.get {_id: characterId}

  $scope.save = ->
    Characters.save $scope.character, ->
      window.location.hash = "/characters"

  $scope.delete = (character) ->
    Characters.remove {_id: character._id}, ->
      window.location.hash = "/characters"




CharacterRouter = ($route) ->
  $route.when '/characters', {templateUrl: '/partials/characters.html', controller: CharacterListCtrl}
  $route.when '/characters/:id', {templateUrl: '/partials/characters.html', controller: CharacterListCtrl}


## SERVICES ######################################################
Characters = ($resource) ->
  $resource "/characters/:_id"

# singleton character state (selected)
CharactersState = ->
  selected: null

angular.module('characterServices', ['ngResource'])
  .factory('Characters', Characters)
  .factory('CharactersState', CharactersState)

## BOOTSTRAP #####################################################
angular.module('characters', ['characterServices']).config(['$routeProvider', CharacterRouter])
  

characters.html

<h1>Characters</h1>


<div class="side">
  <div><a href="#/characters/new"><button>Add</button></a></div>
  <div><input ng-model="filterTerm" placeholder="Filter"></div>
  <div>
    <select ng-model="order">
      <option value="natural">Sort: Natural</option>
      <option value="name">Sort: Alphabetical</option>
    </select>
  </div>

  <div class="list" ng-repeat="character in characters | filter: filterTerm | orderBy: order">
    <a ng-click="delete(character)">x</a>
    <a href="#/characters/{{character._id}}">{{character.name}}</a>
    <!-- <a ng-click="edit(character)">{{character.name}}</a>-->
  </div>
</div>

<div class="main" ng-include="'/partials/characters-details.html'" ng-show="state.selected">
</div>