<div ng-app="formApp">
  <div ui-view />
</div>

<script type="text/ng-template" id="form/step1.html">
Step 1 -
What animal do you prefer ?
<button ng-click="
  step1Ctrl.selectAnimal('doge');
  ">
Doge
</button>
<button ng-click="
  step1Ctrl.selectAnimal('cate');
  ">
Cate
</button>
</script>
<script type="text/ng-template" id="form/step2.html">
Step 2 -
What color do you like your {{step2Ctrl.formRegistry.animal}}?
<button ng-click="
  step2Ctrl.selectColor('white');
  ">
White
</button>
<button ng-click="
    step2Ctrl.selectColor('black');
  ">
  Black
</button>
</script>
<script type="text/ng-template" id="form/step3.html">
Step 3 -
{{step3Ctrl.result()}}
</script>
var formApp = angular.module('formApp', ["ui.router"]);

formApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
    .state('step1', {
      url: '/step1',
      templateUrl: "form/step1.html",
      controller: 'step1Controller as step1Ctrl',
    })
    .state('step2', {
      url: '/step2',
      templateUrl: "form/step2.html",
      controller: 'step2Controller as step2Ctrl',
    })
    .state('step3', {
      url: '/step3',
      templateUrl: "form/step3.html",
      controller: 'step3Controller as step3Ctrl',
    })
;
  $urlRouterProvider.otherwise('/step1');
});
formApp.service('formRegistry', function(){
  this.animal = undefined;
  this.color = undefined;
});
formApp.controller('step1Controller',
 function($state, formRegistry){
  this.selectAnimal= function(animal){
      formRegistry.animal = animal;
      $state.go('step2');
  }
})
.controller('step2Controller',
 function($state, formRegistry){
  this.formRegistry = formRegistry;
  this.selectColor= function(color){
      formRegistry.color = color;
      $state.go('step3');
  }
})
.controller('step3Controller', function(formRegistry){        
    this.result = function(){
      if(formRegistry.animal === 'doge'){
        if (formRegistry.color === 'white'){
          return 'wow. white doge. such noble. so lithgside. much puer. wow'
        }
        return 'wow. black doge. such scary. many darkness. so scare. wow'
      }
      if (formRegistry.color === 'white'){
        return 'white cate wisdom - “In the middle of a world that has always been a bit mad, a cat walks with confidence.” '
      }
      return 'Black cate. Pernicious. 13. Bad luck';
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js