Develop Reference

I am using angular 2 and I have created a form and Marked fields as required but still my got submitted

I am using Angular 2 and I have created a form and mark all the fields as required but in only one field required is not working but when I inspect through browser then I can check on that field it is giving error like ng-untouched, ng-invalid sill my form got submitted.
My code is below:
<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
<div class="form-group">
<div class="col-sm-6">
<!--<input type="text" class="form-control" placeholder="City" name="scity" [(ngModel)]="selectedExperience.city" #scity="ngModel" required />-->
<input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)" (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive" placeholder="Zip(Optional)" name="szip" [(ngModel)]="selectedExperience.zip" maxlength="5" pattern="[0-9]{5}" #szip="ngModel" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!--<input type="text" class="form-control" [(ngModel)]="selectedExperience.restaurantName" #restaurantName="ngModel" placeholder="Restaurant Name" name="restaurantName" required>-->
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [formControl]="restaurant" [source]="restaurants" [list-formatter]="autocompleListFormatter" value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control input-responsive" name="restaurantType" [(ngModel)]="selectedExperience.restaurantType" #restaurantType="ngModel" required>
<option value="" disabled selected>Select Restaurant Type</option>
<option value="Ethnic">Ethnic</option>
<option value="Fast Food">Fast Food</option>
<option value="Fast Casual">Fast Casual</option>
<option value="Casual Dinning">Casual Dinning</option>
<option value="Family Style">Family Style</option>
<option value="Fine Dinning">Fine Dinning</option>
<option value="Cafe">Cafe</option>
<option value="Bar">Bar</option>
</select>
</div>
<div class="col-sm-6">
<select class="form-control input-responsive" name="designation" [(ngModel)]="selectedExperience.workProfile" #workProfile="ngModel" required>
<option value="" disabled selected>Select Work Profile</option>
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
<option value="Busser">Busser</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerFrom" readonly="true" placeholder="From* : MM/yyyy" maxlength="7" name="fromDate" [(ngModel)]="selectedExperience.fromDate" required #fromDate="ngModel" />
<div *ngIf="fromDate.errors && (fromDate.dirty || fromDate.touched)">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">
From Date is required
</small>
</div>
<!--<div *ngIf="fromDate.errors">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">Invalid From Date</small>
</div>-->
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerTo" readonly="true" [disabled]="selectedExperience.isCurrentJob" placeholder="To*: MM/yyyy" maxlength="7" name="toDate" [(ngModel)]="selectedExperience.toDate" #toDate="ngModel" />
<div *ngIf="toDate.errors">
<small [hidden]="!toDate.errors.pattern" class="text-danger">Invalid To Date</small>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<ui-switch (change)="onChange($event)" [(checked)]="selectedExperience.isCurrentJob"></ui-switch>
<p>This is my current job</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
</div>
</div>
</form>
my form is not working for this field:
[(ngModel)]="selectedExperience.restaurantName"

You have used template driven forms for this. Please remove [formControl]="restaurant" and add name="restaurantName" #restaurantName="ngModel". Following is the working code. It works for me.
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName"
#myserver [source]="restaurants" [list-formatter]="autocompleListFormatter"
value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*"
(blur)="update(myserver.value)" loading-text="Loading" required name="restaurantName" #restaurantName="ngModel">

Hide the div click on NO radio button

I solved my issue in snippet but when i using it on my website is not applying means when i click the No radio button the pro div is not closing but here in snippet is working even no errors in console.
Please anyone have other solution to similar like this one. Thanks.
Updated with full code:
now not working here also there are two pro div should be close on No and open on YES
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var pro = document.getElementsByClassName("pro");
for (var i = pro.length - 1; i >= 0; i--) {
pro[i].style.display = chkYes.checked ? "block" : "none";
}
}
$('input[type="radio"]').change(function () {
$(this).nextAll('.pro').toggle(this.value == 'Yes');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" onclick="ShowHideDiv()">
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>

This might be your answer, ShowHideDiv() function because it is a little bit double to make a javascript function and using jQuery to do the same thing.
Also be careful with this
$("input[name='isprocontact']").change(function () {
if(this.value == 'Yes'){
$('.pro').show();
}else{
$('.pro').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form id="add_form" method="post" enctype="multipart/form-data" action="<?php echo site_url('contacts/save'); ?>">
<div class="row">
<div class="col-lg-6">
<h4>English</h4>
<div class="form-group">
<label>Category:</label>
<select id="contact_type" class="chosen-select required" multiple tabindex="6" name="contact_type[]">
<option value=""></option>
<?php foreach ($getSubCat as $key => $value) {?>
<option value="<?php echo $value['Sub_Category_Name'] ?>"><?php echo $value['Sub_Category_Name'] ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<input class="form-control required" name="name" id="name" placeholder="Business Name">
</div>
<div class="form-group">
<input class="form-control required" name="number1" id="number1" placeholder="Contact Number 1">
</div>
<div class="form-group">
<input class="form-control required" name="number2" id="number2" placeholder="Contact Number 2">
</div>
<div class="form-group">
<input class="form-control required" name="owner" id="owner" placeholder="Owner Name">
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="address" id="address" placeholder="Address"></textarea>
</div>
<div>
<div class="form-group ">
<select id="location" class="form-control required" name="location" >
<option value="">Select Location</option>
<?php
foreach ($getLoc as $key => $value) {
$location = $value['location_name']; ?>
<option value="<?php echo $location; ?>"> <?php echo $location; ?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="typediv">
<label><input type="radio" name="type" value="1"> Free</label>
<label><input type="radio" name="type" value="2"> Paid</label>
<label><input type="radio" name="type" value="3"> Emergancy</label>
</div>
</div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="form-group 2 box" style="display:none">
<input type="date" class="required" name='durability' id="datepicker" value="" >
</div>
<div class="form-group isprocontactdiv">
<label>Is Pro Contact </label>
Yes<input type="radio" id="chkYes" name="isprocontact" value="Yes" >
No<input type="radio" id="chkNo" name="isprocontact" value="No" checked="">
</div>
<div class="pro" style="display: none;" >
<div class="form-group">
<input class="form-control required" name="email" placeholder="Email" >
</div>
<div class="form-group" >
<input type="file" name="userfile">
</div>
<div class="form-group">
<textarea class="form-control required" id="description" name="description" rows="3" placeholder="Description" ></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" id="services" rows="3" name="services" placeholder="Services" ></textarea>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>Marathi</h4>
<div class="form-group">
<input class="form-control required" name="name_marathi" id="name_marathi" placeholder="व्यवसाय">
</div>
<div class="form-group">
<input class="form-control required" name="contact_owner_marathi" id="contact_owner_marathi" placeholder="मालकाचे नाव">
</div>
<div class="form-group">
<textarea class="form-control required" name="contact_address_marathi" id="contact_address_marathi" rows="3" placeholder="पत्ता"></textarea>
</div>
<div class="pro" style="display:none">
<div class="form-group">
<textarea class="form-control required" name="description_marathi" id="description_marathi" rows="3" placeholder="सविस्तर माहिती"></textarea>
</div>
<div class="form-group">
<textarea class="form-control required" rows="3" name="service_marathi" id="service_marathi" placeholder="सुविधा"></textarea>
</div>
</div>
</div>
</div>
<!-- /.row -->
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-warring">Reset</button>
</form>
</div>

your question isn't really clear but if you want ide form when you click no you can process like that e.g:
var $chkNo = $('#chkNo');
var $chkYes = $('#chkYes');
var $proform = $('.pro');
$chkNo.on('click',function(){
$proform.css('display','none') // or you can play with visibility property
});
$chkYes.on('click',function(){
$proform.css('display','block') // or you can play with visibility property
});

How to check if a field from a form is filled?

So I am trying to figure out a way to blank a field if a particular field is entered and vice versa.
The form locates urgent care locations base on the entries that the users enters. So we have the urgent care facility name, city, zip code and miles field.
So what I would like to do is if the user enters the zip code in the zip code field and if the user previously had selected a city based on the selection given, it blanks out the city and vice versa. If the user selects a city from the city drop down list, the zip code field blanks out.
The following is the code I have:
$('#zip').on('input‌', function() { $('#city').val("") })
$('#city').on('input‌', function() { $('#zip').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
<div class="form-group">
<input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->
<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select>
</div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" name="distance" ng-model="searchParam.distance">
<option selected="selected" value=" "></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
</div>
</form>
</div>
</div>

You have an invisible character with code 0x5396c after input in your .on() calls. When I remove that, the code works.
$('#zip').on('input', function() {
$('#city').val("")
})
$('#city').on('input', function() {
$('#zip').val("")
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
<div class="form-group">
<input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->
<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select>
</div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" name="distance" ng-model="searchParam.distance">
<option selected="selected" value=" "></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
</div>
</form>
</div>
</div>

ng-include not working like it supposed to

I have a form and it has several buttons. When clicking one of this button, this form should remove and load another form. I'm trying to do this using ng-include method. I have done a similar thing before and got it to work. But I cannot understand why this is not working.
I have given the 2nd form inside script tag and when clicking the above mentioned button it calls for this form. But it does not load.
I have removed the existing form using ng-if method in the controller.
My html code
<div class="container">
<form role="form" id="info_form" name="info_form" ng-controller="infoCtrl" ng-app="app" novalidate>
<div>
<section class="content-header">
<h1>
Fill your medical information
<!--<small>Optional description</small>-->
</h1>
</section>
<!-- Main content -->
<section class="content">
<div>
<div class="box">
<?php
echo form_open('info/addInfo');
?>
<div class="box-body">
<div>
<div class="col-lg-12">
<div style="margin-top: 15px;width: 100%;">
<!--first block-->
<div style="float: left;width: 33%;height: 100%" ng-show="table_remove">
<div class="form-group">
<label class="info_ques_text">Age</label>
<div class="input-group">
<input class='input' type="number" class="form-control" name="Age" id="Age" ng-model="data.age" placeholder="Enter your age" required><br>
<span class="error_msg" ng-show="submitted && info_form.Age.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Sex</label>
<div class="input-group">
<select class='input' name="Sex" id="Sex" ng-model="data.sex" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Sex.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Blood Pressure</label>
<div class="input-group">
<input class='input' type="number" class="form-control" name="Pressure" id="Pressure" ng-model="data.blood_pressure" placeholder="Enter your blood pressure" required><br>
<span class="error_msg" ng-show="submitted && info_form.Pressure.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Blood Sugar</label>
<div class="input-group">
<select class='input' name="Sugar" id="Sugar" ng-model="data.sugar" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="PF">Low</option>
<option value="NPF">Normal</option>
<option value="C">High</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Sugar.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Maximum Heart Rate</label>
<div class="input-group">
<input class='input' type="number" name="Heart" id="Heart" class="form-control" ng-model="data.heart_rate" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Heart.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--second block-->
<div class="form-group">
<label class="info_ques_text">Slope The Peak Exercise ST Segment</label>
<div class="input-group">
<input class='input' type="number" name="Slope" id="Slope" class="form-control" ng-model="data.slope" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Slope.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Number of major vessels</label>
<div class="input-group">
<select class='input' name="Vessel" id="Vessel" ng-model="data.vessels" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Vessel.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Smoking</label>
<div class="input-group">
<select class='input' name="Smoke" id="Smoke" ng-model="data.smoking" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes - Heavy Smoker</option>
<option value="2">Yes - Light Smoker</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Smoke.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">Exercising</label>
<div class="input-group">
<select class='input' name="Exercise" id="Exercise" ng-model="data.exercise" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Exercise.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--third block-->
<div style="float: left;width: 34%;height: 100%" ng-show="table_remove">
<div class="form-group">
<label class="info_ques_text">Consuming Alcohol</label>
<div class="input-group">
<select class='input' name="Alcohol" id="Alcohol" ng-model="data.alcohol" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">No</option>
<option value="1">Yes - Heavy Consumer</option>
<option value="2">Yes - Light Consumer</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Alcohol.$error.required">Value cannot be blank</span>
</div>
</div>
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
<input class="input" type="hidden" name="Email" id="Email" class="form-control" ng-model="data.email" value="<?php echo($email); ?>"><br>
<!-- <div style="margin-left: 10px;"><button1><a href="" ng-click="submitted = true;
submit(data)">Submit</a></button1></div>
-->
</div>
</div>
</div>
</div>
</div>
<div class="box-footer" ng-show="table_remove">
<button href="" type="submit" ng-click="submitted = true;
train(data);" class="btn btn-primary">Train data</button>
<button href="" type="submit" ng-click="submitted = true;
submit(data);
template = 'addeditview'" class="btn btn-primary">Submit</button>
<a type="button" class="btn btn-danger" href="{{url()}}/admin/organizations/view">Cancel</a>
</div>
<?php
echo form_close();
?>
</div>
</section><!-- /.content -->
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="addeditview">
<form class="form-horizontal" role="form" id="prediction_form" name="prediction_form" ng-controller="infoCtrl" ng-app="app" ng-submit="submit(data)" novalidate>
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
</form>
</script>
</div>
</div>
</body>
</div>

The src attribute has to point to a valid html file, taking into account the root folder as www (or at least where you're supposed to) As such:
<ng-include src="template.html"></ng-include>
I would suggest not to discredit a very respected and solid framework only because you don't understand the documentation :)

Submit button disappears when clicked

When you fill in the form and click the "Start Earning" button the button disappears!!! It still goes through and goes to the next page so that much works but I have no idea why the button disappears.... Any ideas???
<?php /*** Form begins here ***/ ?>
<form method="post" action="redirect.php" name="home_sub" accept-charset="utf-8" id="home_sub">
<div class="form_fields">
<p><label for="first_name" class="over">First Name:</label>
<input name="first_name" id="first_name" class="text_input required" type="text" value="" onClick="$('#optinsection').show()" /></p>
<p><label for="last_name" class="over">Last Name:</label>
<input name="last_name" id="last_name" class="text_input required" type="text" value="" onClick="$('#optinsection').show()" /></p>
<p><label for="email" class="over">E-mail:</label>
<input name="subscriber_email" id="email" class="text_input xverify_email required" type="text" value="" onClick="$('#optinsection').show()" autocomplete="off" /></p>
<p><label for="custom_Address" class="over">Address:</label>
<input name="custom_Address" type="text" id="custom_Address" value="" class="text_input" autocomplete="off" /></p>
<p><label for="custom_City" class="over">City:</label>
<input name="custom_City" type="text" id="custom_City" value="" class="text_input" autocomplete="off" /></p>
<p><label class="hidden">Select State</label>
<select name="custom_State" id="custom_State" class="select_input">
<option value="">Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="WY">Wyoming</option>
</select></p>
<p><label for="custom_ZipCode" class="over">Zip code:</label>
<input name="custom_ZipCode" type="text" id="custom_ZipCode" class="text_input required" value="" maxlength="5" autocomplete="off" /></p>
<p><label class="hidden">Birth Month</label>
<select name="custom_DOBMonth" id="custom_DOBMonth" class="select_input select_month">
<option value="">Birth Month</option>
<option value="01">January</option>
<option value="02">Febuary</option>
</select>
<label class="hidden">Birth Day</label>
<select name="custom_DOBDay" id="custom_DOBDay" class="select_input select_day">
<option value="">Day</option>
<?php for($dy=1; $dy<32; $dy++){
$sdy = $dy < 10? '0'.$dy: $dy;
echo '<option value="'.$sdy.'">'.$dy.'</option>';
} ?>
</select>
<label class="hidden">Birth Year</label>
<select name="custom_DOB_Year" id="custom_DOB_Year" class="select_input select_year">
<option value="">Year</option>
<?php for($yr=2000; $yr>1910; $yr--){
echo '<option value="'.$yr.'">'.$yr.'</option>';
} ?>
</select></p>
<p><label class="hidden">Select Gender</label>
<select name="custom_Gender" id="custom_Gender" class="select_input">
<option value="">Select Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select></p>
<p><label for="custom_Phone" class="over">Phone: (xxx-xxx-xxxx)</label>
<input type="text" name="custom_Phone" id="custom_Phone" class="text_input" value="" /></p>
<span id="optinsection">
<br />
<input type="checkbox" name="chk_allinbox" id="chk_allinbox" class="required" value="1" />
By checking this box, you agree to our Terms of Service and Privacy Policy and agree to receive daily newsletters and promotions via email from BestHotSurveys.com.
<br /><br />
</div>
<div class="form_button">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;" />
</div>
</form>
<?php /*** Form ends here ***/ ?>

From the site you provided after submit button is clicked the submit button wrapper div form_button is stylized by a background-image style.
Before Button Click :
<div class="form_button">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;">
</div>
After button click with validation pass :
<div class="form_button" style="background-image: url(http://www.besthotsurveys.com/images/form_bottom_sending.gif);">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;" disabled="disabled">
</div>
So look onto your TMG_CheckForClick for removing that style or check the availability of that image.
Currently for the image access it throws
The requested URL /images/form_bottom_sending.gif was not found on
this server.