<div class="register" ng-controller="registerCtrl as vm">
  <div class="col-lg-7 col-md-7 col-sm-12">
     <div class="unauthorized-left">
        <div class="unauthorized-logo-wrapper">
           <img src="../../../assets/img/theme/logo.png"  alt=""/>
        </div>
        <div class="unauthorized-container">
           <div class="unauthorized-intro">
              <h1>Welcome to Callio’s registration page</h1>
              <div class="h3 rotator">
                 <span class="text-rotator-login">{{vm.sentence.static}}</span> 
                 <text-rotator options="vm.sentence.options"></text-rotator>
              </div>
              <p>You are only minutes 
                 away from creating your Callio account, receiving your local land line number and start saving 
                 hundreds of dollars in call charges with unlimited calls from loved ones in custody
              </p>
              <button  ui-sref="login"  type="submit" class="button btn btn-default btn-reg">login here</button>
           </div>
        </div>
        <ul class="unauthorized-links">
           <li>
              <a title="Help center" href="tel:+1300 933 023 " target="_blank">
              Phone us    </a>
           </li>
           <li>
              <a title="ERC Website" href="mailto: info@callio.com.au" target="_blank">
              Email us   </a>
           </li>
           <li>
              <a title="Choose language" href="https://callio.com.au/contact-us/" id="choose-language">
              Contact us     <span class="icon icon-ios-arrow-right"></span>
              </a>
           </li>
        </ul>
     </div>
  </div>
  <div class="col-lg-5 col-md-5 col-sm-12">
     <div class="unauthorized-right">
        <div class="unauthorized-container is-big">
           <div class="unauthorized-form">
              <h3>Register your account details</h3>
              <form name="multiStepForm" class="form-validation" role="form" ng-submit="vm.register(register.$valid)" novalidate>
                 <div class="animate-switch-container" ng-switch on="stage" ng-class="{forward: direction, backward:!direction}">
                    <div class="animate-switch" ng-switch-default>
                       <div class="row">
                          <div class="col-lg-6 col-md-6 col-sm-12">
                             <div class="form-group"> 
                                <label for="ta-body">First Name</label>
                                <input type="text" class="form-control" id="tb-fname" name="firstName"  ng-maxlength="250" placeholder="Enter First name"   ng-model="vm.formParams.firstName" required ng-class="{'input-error': formValidation && multiStepForm.firstName.$error.required}" >
                                <span ng-show="multiStepForm.firstName.$error.maxlength">
                                Max character length reached.
                                </span>
                             </div>
                          </div>
                          <div class="col-lg-6 col-md-6 col-sm-12">
                             <div class="form-group">
                                <label for="ta-body">Last Name</label>
                                <input type="text" class="form-control" id="tb-lname" name="lastname" placeholder="Enter Last name"  ng-maxlength="250" ng-model="vm.formParams.lastname" required ng-class="{'input-error': formValidation && multiStepForm.lastname.$error.required}" >
                                <span ng-show="multiStepForm.lastname.$error.maxlength">
                                Max character length reached.
                                </span>
                             </div>
                          </div>
                       </div>
                       <div class="row">
                          <div class="col-lg-6 col-md-6 col-sm-12">
                             <div class="form-group"> 
                                <label for="ta-body">Email</label>
                                <input type="email" class="form-control" id="tb-email" name="email" ng-maxlength="100"  placeholder="Enter your email"  ng-model="vm.formParams.email" ng-class="{'input-error': formValidation && multiStepForm.email.$error.required}" ng-model-options="{ updateOn: 'blur' }" required>
                                <span ng-show="multiStepForm.email.$error.email">
                                Incorrect email format.
                                </span>
                                <span ng-show="multiStepForm.email.$error.maxlength">
                                Max character length reached.
                                </span>
                             </div>
                          </div>
                          <div class="col-lg-6 col-md-6 col-sm-12">
                             <div class="form-group"> 
                                <label for="ta-body">Phone Number </label>
                                <input type="text" class="form-control" id="tb-lname" name="companyphone" placeholder="Enter your Phone number "  ng-maxlength="250" ng-model="vm.formParams.companyphone" required ng-class="{'input-error': formValidation && multiStepForm.companyphone.$error.required}" >
                                <span ng-show="multiStepForm.companyphone.$error.maxlength">
                                Max character length reached.
                                </span>
                             </div>
                          </div>
                       </div>
                       <div class="row">
                          <div class="col-lg-12 col-md-12 col-sm-12">
                             <div class="form-group">
                                <label for="ta-body">State of Inmate</label>
                                <ol class="nya-bs-select col-sm-12" ng-model="vm.formParams.state">
                                   <li nya-bs-option="state in states">
                                      <a>
                                      {{state.Description}}
                                      <span class="glyphicon glyphicon-ok check-mark"></span>
                                      </a>
                                   </li>
                                </ol>
                             </div>
                          </div>
                       </div>
                       <div class="row">
                          <div class="col-lg-6 col-md-6 col-sm-12">
                             <div class="form-group">
                                <label for="ta-body">Password</label>
                                <input type="text" class="form-control"  ng-model="vm.formParams.password" placeholder="Enter your Password" name="password"required="required" ng-minlength="6" ng-maxlength="12"/>
                                <div ng-if="multiStepForm.password.$touched || signupSubmitted">
                                   <p ng-show="multiStepForm.password.$error.required" class="help-block">Password is required</p>
                                   <p ng-show="multiStepForm.password.$error.minlength" class="help-block">Minimum 6 character</p>
                                </div>
                             </div>
                          </div>
                          <div class="col-lg-6 col-md-6 col-sm-12">
                             <div class="form-group">
                                <label for="ta-body">Confirm Password</label>
                                <input type="text" class="form-control"  name="confirm_password" ng-model="vm.formParams.confirm_password" placeholder="Confirm your password" match-password="vm.formParams.password" required>
                                <div ng-if="multiStepForm.confirm_password.$touched || signupSubmitted">
                                   <p ng-show="multiStepForm.confirm_password.$error.required" class="help-block">Confirm password is required</p>
                                   <p ng-show="multiStepForm.confirm_password.$error.matchPassword && !multiStepForm.confirm_password.$error.required" class="help-block">Confirm password didn't match</p>
                                </div>
                             </div>
                          </div>
                       </div>
                       <div class="row">
                          <div class="col-md-12">
                             <button type="button" class="btn btn-primary" ng-click="next('stage1')">Start</button>
                          </div>
                       </div>
                    </div>
                    <div class="animate-switch" ng-switch-when="stage1">
                       <ng-owl-carousel class="owl-theme" owl-items="items" owl-properties="properties" owl-ready="ready($api)">
                          <div class="item">
                             <div class="grid-1-5">
                                <div class="space">
                                   <h2>{{'plans.bronze' | translate}}</h2>
                                   <p> {{'plans.bronzesubplan' | translate}}</p>
                                   <h3><span class="uppercase">{{'plans.bronzeprice' | translate}}</span></h3>
                                   <p><strong>{{'plans.bronzesavings' | translate}}</strong></p>
                                   <p>{{'plans.mins' | translate}}</p>
                                   <ul>
                                      <li>{{'plans.setup' | translate}}</li>
                                      <li>{{'plans.cancel' | translate}}</li>
                                      <li>Email Support</li>
                                      <li>Phone Support</li>
                                   </ul>
                                   <button ng-click="vm.selectPlan(1)" class="button">{{'plans.signup' | translate}}</button>
                                </div>
                             </div>
                          </div>
                          <div class="item">
                             <div class="grid-1-5">
                                <div class="space">
                                   <h2>{{'plans.silver' | translate}}</h2>
                                   <p> {{'plans.silversubplan' | translate}}</p>
                                   <h3><span class="uppercase">{{'plans.silverprice' | translate}}</span></h3>
                                   <p><strong>{{'plans.silversavings' | translate}}</strong></p>
                                   <p>{{'plans.mins' | translate}}</p>
                                   <ul>
                                      <li>{{'plans.setup' | translate}}</li>
                                      <li>Email Support</li>
                                      <li>Phone Support</li>
                                   </ul>
                                   <button ng-click="vm.selectPlan(2)" class="button">{{'plans.signup' | translate}}</button>
                                </div>
                             </div>
                          </div>
                          <div class="item">
                             <div class="grid-1-5">
                                <div class="space">
                                   <h2>{{'plans.gold' | translate}}</h2>
                                   <p> {{'plans.goldsubplan' | translate}}</p>
                                   <h3><span class="uppercase">{{'plans.goldprice' | translate}}</span></h3>
                                   <p><strong>{{'plans.goldsavings' | translate}}</strong></p>
                                   <p>{{'plans.mins' | translate}}</p>
                                   <ul>
                                      <li>{{'plans.setup' | translate}}</li>
                                      <li>Email Support</li>
                                      <li>Phone Support</li>
                                   </ul>
                                   <button ng-click="vm.selectPlan(3)" class="button">{{'plans.signup' | translate}}</button>                                 
                                </div>
                             </div>
                          </div>
                          <div class="item">
                             <div class="grid-1-5">
                                <div class="space">
                                   <h2>{{'plans.platinum' | translate}}</h2>
                                   <p> {{'plans.platinumsubplan' | translate}}</p>
                                   <h3><span class="uppercase">{{'plans.platinumprice' | translate}}</span></h3>
                                   <p><strong>{{'plans.platinumsavings' | translate}}</strong></p>
                                   <p>{{'plans.mins' | translate}}</p>
                                   <ul>
                                      <li>{{'plans.setup' | translate}}</li>
                                      <li>Email Support</li>
                                      <li>Phone Support</li>
                                   </ul>
                                   <button ng-click="vm.selectPlan(4)" class="button">{{'plans.signup' | translate}}</button>                                 
                                </div>
                             </div>
                          </div>
                          <div class="item">
                             <div class="grid-1-5">
                                <div class="space">
                                   <h2>{{'plans.diamond' | translate}}</h2>
                                   <p> {{'plans.diamondsubplan' | translate}}</p>
                                   <h3><span class="uppercase">{{'plans.diamondprice' | translate}}</span></h3>
                                   <p><strong>{{'plans.diamondsavings' | translate}}</strong></p>
                                   <p>{{'plans.mins' | translate}}</p>
                                   <ul>
                                      <li>{{'plans.setup' | translate}}</li>
                                      <li>Email Support</li>
                                      <li>Phone Support</li>
                                   </ul>
                                   <button ng-click="vm.selectPlan(5)" class="button">{{'plans.signup' | translate}}</button>                                 
                                </div>
                             </div>
                          </div>
                       </ng-owl-carousel>
                       <div class="row">
                          <div class="col-md-12">
                             <button type="button" class="btn btn-primary" ng-click="next('stage2')">Start</button>
                             <button type="button" class="btn btn-primary" ng-click="goBack()">Back</button>
                          </div>
                       </div>
                    </div>
                    <div class="animate-switch" ng-switch-when="stage2">
                       <div class="row">
                          <div class="container group">
                             <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="description">
                  <div ng-if="vm.selectedPlan">
   <h3>Selected Plan: {{ vm.selectedPlan.heading }}</h3>
   <p>Price: {{ vm.selectedPlan.price }}</p>
   <!-- Other plan details -->
</div>

                                   <p><strong>{{'purchase.youhavechoosen' | translate}}</strong> {{ vm.heading }} </p>
                                   <p><strong>{{'purchase.username' | translate}}</strong> {{vm.formParams.firstName}} {{vm.formParams.lastname}} </p>
                                   <p><strong>{{'purchase.subprice' | translate}}</strong> {{vm.price}}</p>
                                   <p><strong>{{'purchase.subperiod' | translate}}</strong> From  {{vm.today | date:'dd-MM-yyyy'}} <span>{{'purchase.to' | translate}}</span> {{expiry | date:'dd-MM-yyyy'}}</p>
                                </div>
                             </div>
                             <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="notification">
                                   <img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE82lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTEwLTAyVDE2OjA1OjIzKzExOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0xMC0wMlQxNjowNjoyMysxMTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0xMC0wMlQxNjowNjoyMysxMTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzNiNzgxZDgtMTljMS1mODRiLWJiNWUtNzRmMTg2ZDZhOTA2IiB4bXBNTTpEb2N1bWVudElE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"  class="notification__icon"/>
                                   <span class="notification__text">
                                   {{'purchase.noitfypaymentdescription' | translate}}      </span>
                                </div>
                                <div class="card-type clearfix">
                                   <div class="card-type__label">
                                      {{'purchase.carddetails' | translate}} 
                                   </div>
                                   <div class="card-type__icons">
                                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAOCAYAAABZ/o57AAAAAXNSR0IArs4c6QAABLJJREFUSA2tVk1sVFUUPue+9+ZHZ94wibWmBTL2tSCVxBjF8LOQhUsWmmriQsPCNGFDGlphYYiZBGOt2EwLJhhjUNxIohsShVaDRhMrMUGjFVDT6Q8goRqhPzOlPzPv+p335s5MBVZ6knfP7z333PNzZziWyWVIl5jqwLapWMjv/7NOFJJN2Xti0USDkS9O/H4t3uw12vHIOpH5ZX+hONHzk9EHOJONJfxEi7KdDHHZ98m6WsjfvEiU9VfZCdPyRipO8ZSQt4rLf9P0/qLQAiqiVHvEiRyKOpGf8Y3LZ3FkOtU6cDw0qa1ufE1v1HIm5Yso5xxRE9ux6EFFakQ+y7LfNNap9b3plJfrS9npaSviXGBFnzFbZyym0ZSXHjZ2BrvewLGUis9EFE3J5yadA0YnWM2Nd52eG+t6YXbhZmNZ65Oa9LIotKbddF9fUugAkBkmftGwMDiGrCyjFJurMp9+CeiGbEI78WFiJYe5Vb0hWE8ZUrCb6d/KzHvqZaC31fOqylzLLljEb5HmeU2Ux0aVSNmPG72rUh3ElBYe+iWfV94RGsFXA4U8CDTppvZg/xbRAwo++Z3oiy0ln57ytT5Q9vXpUBWubNs99bzQrPkJJKIan11vMJvv+sFtHfRZ6yaYTjHZcthXwUalOqu22j8pPRz3+tch0qCnAhvSQaCKeIexRYWuzI/NfijZr8jOGp1gmRFU7xmWKdH6MvxZOLtZ/Ca8dHshH16+GnFlM5KiUTKOg3CZ9SMiT7b0bwB6smJDpZI/KLRDqpZNRDRXXLkY2vCYsUXGN7leejTRMtBhZPU4YnMXgkRwOJnpAyD0fghMulr+fweK0dVDYobNaa11MM2K7Vo2SX+zMNXzo9jourLjUhNmSvVSuRdxXxIbAfjaYCn+xPUGv403960NpVgx5UjkS8LjLH+5XDrua/rO6BXX+vS2QP2FW5+jFEioHMDb4s1H1uKmu81m9FeQzUBfN0jYEw4SFHNXu2/MjeUfxdmH4GjJ7EXA251Y9EuivVGRJTmKBLAZ2C8WJ17GkOlqRpGIu2e0cP2Vv2B8XhyhbLYT06/j1uHbqWmqMD5ySnQCkNdKXxmkUCPr0aW5/L5XV3SpDZcIqiRSXL7NbfV2omdt9PJekQnA12Vk/HmQbYFAFk0b5ZkT8raMihBQ55iqTxKm922ij8uhSTCRm0I6uNRoQGdya4xM8K18zxUEcbBehjIX0LfPIur1VTlzJzL+kWL1vpGBZ+3Etgq/auqNASo/BJtVznG94nyZ3jM2bkvaQxrihsfPTFB611bD7A1iOPyzWvN19O4DaJ0OBBsAfN+Yz1/63vXac0EejYO7Yyn/mTsGOp8fOZfydszgxtXsoNdO0OS+GeMPh2+uHU4rhfyF36BDEvTDWO9FsR4DIyIpawBogUXt+08nH3xIHnjzzlK5VN5ZwnNYMaOIxbugPyo8kwr69I6BSnk1bUcv8i5kEjFiLdMRwQbQMw1Q/BrwWo8TvbtCjYcRIA1hh7yjjUHp5I+E5j+QyVPLZZ1bnOyexM/lCfTfbOhLny9Mdn8d0pU1k/s0avFrFf1GYHPXVWb/E5O1E97h+4meC97I/+r0H2FHmUxT7+LTAAAAAElFTkSuQmCC" class="card-type__icon card-type__icon--disabled" ng-class="{'card-type__icon--disabled': !isVisa()}" />
                                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAUCAYAAAB1aeb6AAAAAXNSR0IArs4c6QAABABJREFUSA2VlW1ollUYx3/3NqduavlSyy3TTNecLy1RyxXMhBl9iJFazrcIIjKhzH2Q8MMMkdbLB0n60AsUZUQg+EItNPBjTjBMRytCnVubiZuxTXHNbe7ud/bwPDhm7dkFF+c+53r7n/+5zrkj/kNiiDQtUB9QJ6pX1HoX/3a8o8TfkEcmxWQ4xlxngGYqaTDGdMMlFBgiek1z4S11gzp9iBHTQZ36gYFHkrb4AM+bfrtwH3dtaM6YS658TS/vRRvpSMaEcYijhde49rk6KRhHkGM8y5ts5mOzlI3gG/beIfQXo0q+T/qmilt4q4sfqam1pNMdx4h2auhjFvlSnZ7Elo95JVo3uMFEIQuvNPpHNd00A2SbJkP/h43aqWao6Ugs4JinBPBTZOEsY35VQ5r0pJAT7KA05TzGr5zUbOSPmLP8xuJQfJ3e344ckfIY4C6xR7exdI+2d1L29D5iKsKuVzNvHpSX22r22qZN0NQER48OT5KbC1MnNLLjypxhxpuu3LdMfRrajnshTwxzSS3Mtr0ufvJc2Hkj1dUPsmuXMFbDwYOwd69n6CGGYnv2wNq1sHAhXLjgffBCrF8PVVVw3CKtrbDMoouuwsYPoXm/hetgymMeqGdx3h7Or4DO03D3Yui/7gF7k2vzGzLfhnfZujWLMR5cXp4BklFbK6RGWLUKiopgyxaoqYEVK6ChwQazw+osUF0NN91yZaVAvZ03vtOurftPW1fgecZPmAuzX/WF6JU1AY0vEECX7H6VFXq0h/nz4bTIZs6Evj4o0GHbtsRYXw8nTybm4XgOHYI5sh6YCDsvLobduwUt+O4m0yn3vwBzjQ+FMsfBJdnMMXfjp9BxCq79Hrx6MsjObmW6D9m5c3D4cCJxfr40dYp0KsyYAe3tMHlyYl5WlqC/pycREwCdOQN/GFuyD0rd/RSPobcDxk6zuNR3au9Si2Vq7na4bq3MiX9FcU7OPtG/TlubtN2AwsIEtWFHYR4kgDsl4gCqvz8m93LEo6Xu6KKF7oVfbK43bpl4aWKnnWd9I43vNz6SkX9aZLRL3yWO1zwq+6Pvxvuh4TwI5HUUstkmncXsVIQEIcOjkPDUlAw+pQKQMypGEXyLRd7z5EO8xkjZT1vizAOXx5e8lCwun8ir73S6spyfWc4SigywHUYhzXSPf+J8V8HVJHafLEpM8IPqAacpj0j/TukPdyYdiWmhn2eiDTQE91SYKGxH7JhBAMH2f9Kp8bXoLA85VoncLhpRjlh4abJw8E7t/PZQWXjSue8s5ap3DVt2sEAA6F3iMwNt34TEXzLVH8vLzioEssCskxx7nbc4HlP3+x8fXVOH1AIJN2Js+E5X4i8YF+JG8v8X5UMlkwCffwoAAAAASUVORK5CYII=" class="card-type__icon card-type__icon--disabled" ng-class="{'card-type__icon--disabled': !isMasterCard()}"/>
                                   </div>
                                </div>
                                <input type="text" class="card-input card-input--full" placeholder=" {{'purchase.cardnumber' | translate}} " ng-model="vm.formParams.number" required card-number/>
                                <input type="text" class="card-input card-input--full" placeholder="{{'purchase.cardholder' | translate}}" ng-model="vm.formParams.holder" card-holder required/>
                                <div class="card-info clearfix">
                                   <div class="card-info__date">
                                      <div class="card-info__text">
                                         {{'purchase.validity' | translate}}
                                      </div>
                                      <input type="text" class="card-input card-input--date" placeholder="ММ / YY" ng-model="vm.formParams.date" card-date required/>
                                   </div>
                                   <div class="card-info__cvv">
                                      <div class="card-info__text">
                                         {{'purchase.security' | translate}}
                                      </div>
                                      <input type="text" class="card-input card-input--cvv" placeholder="CVV" ng-model="vm.formParams.cvv" card-cvv required/>
                                   </div>
                                </div>
                                <button type="submit" ng-disabled="multiStepForm.$invalid" class="button btn btn-default btn-auth"> {{'purchase.buy' | translate}}</button>
                                <button type="button" class="btn btn-primary" ng-click="goBack()">Back</button>
                                <!-- <button class="payment-form__button" ng-disabled="multiStepForm.$invalid" ng-click="sendForm()">
                                   {{'purchase.buy' | translate}}
                                   </button>-->
                                <div class="payment-form__agreement">
                                   {{'purchase.subscription' | translate}}
                                </div>
                             </div>
                          </div>
                       </div>
                    </div>
                    <div class="animate-switch" ng-switch-when="success">
                       <div class="success-wrap">
                          <h2 class="confirmation-text">Thank you</h2>
                          <p>Your message has been sent.<br>You should receive a confirmation email.</p>
                          <div><button type="button" class="btn btn-success" ng-click="reset()" >Send Another</button></div>
                       </div>
                    </div>
                    <div class="animate-switch" ng-switch-when="error" >
                       <div class="error-wrap">
                          <h2 class="confirmation-text">Error</h2>
                          <p>There was an error when attempting to submit your request.<br>Please try again later.</p>
                          <p><strong>*This will always error until a web service URL is set.*</strong></p>
                          <div><button type="button" class="btn btn-danger" ng-click="reset()" >Try again</button></div>
                        
                       </div>
                    </div>
                 </div>
                 <!-- <pre> {{ vm.formParams | json }}</pre>-->
              </form>
           </div>
        </div>
     </div>
  </div>
</div>
