UI-router multiple named views

/*Downloaded from https://www.codeseek.co/01abhishekjain/ui-router-multiple-named-views-WMGrOj */
body {
  background: lightgrey;
}

/*Downloaded from https://www.codeseek.co/01abhishekjain/ui-router-multiple-named-views-WMGrOj */
var app = angular.module("app", ["ui.router"]);

app.controller("listCtrl", function(records, $scope, $rootScope, $state) {
  $scope.records = records.getAll();

  $scope.select = function(id) {
    $rootScope.$broadcast("selected", id);
  };

  $scope.add = function() {
    $state.go("create");
  };
});

app.controller("createEditCtrl", function(records, $rootScope, $scope, $state) {
  $scope.record = {};
  $scope.intent = $state.current.name;

  $rootScope.$on("selected", function($event, id) {
    $scope.record = records.getOne(id);
  });

  $scope.cancel = function() {
    if ($scope.intent === "view") $scope.record = {};
    else $state.go("view");
  };

  $scope.submit = function() {
    if ($scope.intent === "view")
      records.edit($scope.record.fn, $scope.record.ln, $scope.record.id);
    else records.addOne($scope.record.fn, $scope.record.ln);
    $scope.cancel();
  };
});

app.service("records", function() {
  var store = [];
  this.getAll = function() {
    return store;
  };
  this.getOne = function(id) {
    return angular.copy(store.find(record => record.id === id));
  };
  this.addOne = function(fn, ln) {
    store.push({ fn, ln, id: store.length + 1 });
  };
  this.edit = function(fn, ln, id) {
    var s = store.find(record => record.id === id);
    s.fn = fn;
    s.ln = ln;
  };
});

app.config(function($stateProvider, $urlRouterProvider) {
  var createEditState = {
    template: `
        <div ng-if="(intent==='view' && record.id) || (intent==='create')">
          <h1>{{intent==='view'? 'Edit':'Create'}}</h1>
          <input type="text" ng-model="record.fn" placeholder="first name">
          <input type="text" ng-model="record.ln" placeholder="last name">
          <button ng-click="cancel()">Cancel</button>
          <button ng-click="submit()">Submit</button>
        </div>`,
    controller: "createEditCtrl"
  };

  $stateProvider
    .state({
      name: "view",
      url: "/view",
      views: {
        list: {
          template: `
      <h1>List</h1><button ng-click="add()">ADD</button>
      <div ng-repeat="r in records">
        {{r.fn}}, {{r.ln}}, <button ng-click="select(r.id)">SELECT</button>
      </div>
`,
          controller: "listCtrl"
        },
        createedit: createEditState
      }
    })

    .state({
      name: "create",
      views: {
        createedit: createEditState
      }
    });

  $urlRouterProvider.otherwise("view");
});