title: Why does radio button not function on mobile?
body: <p>I built an online interview. The form uses Angular.js and Bootstrap to display questions and answers. Each answer is attached to a point value that gets summed and totaled at the end for a test score.</p>
  
  <p>The application works wonderfully on Chrome and Safari (both desktop apps), and in Chrome Dev Tools, it simulates well on a multitude of mobile screens.  However, when I view the app on an actual mobile device, I am unable to select an answer among the radio buttons.  What can I do to debug?</p>
  
  <p>Is Angular.js likely the cause?  Perhaps this is a known problem with Bootstrap?  How do I troubleshoot and repair?</p>
  
  <p>Live Site (works on desktop currently (April 7,2016), but not on mobile):
  <a href="http://libertas-security466.info/interview" rel="nofollow">http://libertas-security466.info/interview</a></p>
  
  <p>test.html (Template for each question/answer set)</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
  
          &lt;div class="col-sm-12"&gt;
              &lt;h1&gt;{{question.text}}&lt;/h1&gt;
              &lt;p ng-show="question.subtext"&gt;{{question.subtext}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;p&gt;Remaining Questions: {{questionsLeft}}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;form class="form"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="input-group" ng-repeat="answer in question.answers"&gt;
                          &lt;div class="input-group-addon"&gt;
                              &lt;input type="radio" name="radioGroup" ng-model="selectedAnswer" value="{{answer.text}}" ng-click="setCurrentAnswer(answer)"&gt;
                          &lt;/div&gt;
                          &lt;label class="form-control"&gt;
                              {{answer.text}}
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-12"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="col-sm-3 col-sm-offset-9 text-center"&gt;
              &lt;button ng-click="answer(currentAnswer)" class="btn btn-large btn-primary"&gt;Select Answer&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="FreemasonTest"&gt;
      &lt;head&gt;
          &lt;title&gt;Are you ready?&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" type="text/css" /&gt;
          &lt;link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css" /&gt;
          &lt;script type="text/javascript" src="lib/jquery/jquery-2.2.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="lib/jquery-ui-1.11.4/jquery-ui.min.js" &gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="lib/angular/angular.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"&gt;&lt;/script&gt; 
          &lt;script type="text/javascript" src="javascript/app.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="javascript/routes.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript" src="javascript/model/AssessmentModel.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="javascript/questions.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="javascript/needs.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="javascript/controllers/TestController.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="javascript/controllers/ResultsController.js"&gt;&lt;/script&gt;
          &lt;nav class="navbar navbar-inverse"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="index.html"&gt;Libertas-Security Lodge #466&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>