Browser button back and forward on a AngularJS multi-step form

Question

I'm creating a multi-step form and am using AngularJS along with ui-router to break up each question into it's own view so that the user can go back and forth on the questions using the browser back and forward buttons.

I wanted to know if there was a way that if a user clicks back on a form question, clears an answer, they can no longer click the browser forward button until they actually pick an answer, furthermore, the user can't manually type in the url (eg. url.com/#/question7) to access question 7 if all other questions beforehand haven't been filled in yet.

I was thinking about running a check on load to see if a variable exists when that view is loaded, if the variable doesn't exist, it moves back in the page, however I am not completely sure how i'd accomplish that.

I have my basic ui-router set up like this:

app.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise("/home");

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: "home.html"
  })
  .state('q1', {
    url: "/q1",
    templateUrl: "q1.html"
  })
  .state('q2', {
    url: "/q2",
    templateUrl: "q2.html"
  })
  .state('q3', {
    url: "/q3",
    templateUrl: "q3.html"
  })
  .state('q4', {
    url: "/q4",
    templateUrl: "q4.html"
  })
  .state('q5', {
    url: "/q5",
    templateUrl: "q5.html"
  })
  .state('q6', {
    url: "/q6",
    templateUrl: "q6.html"
  })
  .state('q7', {
    url: "/q7",
    templateUrl: "q7.html"
  })
  .state('q8', {
    url: "/q8",
    templateUrl: "q8.html"
  });
});

Thanks in advance, any help is appreciated.