We Keep Coding

I am not Getting Any Errors but When i am trying to click on Form my form Type Mouse does not appear

My form is Getting no Errors on Chrome Developers Error code but i am not getting and Text field or anything in my forms it is a very easy task but it had become a headache for me i will be very Helpfull if you help me with this
<section class="reservation">
<img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
<div class="wrapper">
<div class="container-fluid">
<div class=" section-content">
<div class="row">
<div class="col-md-5 col-sm-6">
<form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="name" id="name"
placeholder="  Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  e-mail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  Phone">
</div>
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder=" Time">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  We're listening"></textarea>
</div>
<div class="col-md-12 col-sm-12">
<button type="submit" id="submit" name="submit" class="btn btn-reservation">
<span><i class="fa fa-check-circle-o"></i></span>
Make a reservation
</button>
</div>
</div>
</form>
</div>

Just added BS cdn and copied your code. Everything looks fine and i see all the fields, did you include CDN as required??
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="reservation">
<img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
<div class="wrapper">
<div class="container-fluid">
<div class=" section-content">
<div class="row">
<div class="col-md-5 col-sm-6">
<form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="name" id="name" placeholder="  Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  e-mail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  Phone">
</div>
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder=" Time">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  We're listening"></textarea>
</div>
<div class="col-md-12 col-sm-12">
<button type="submit" id="submit" name="submit" class="btn btn-reservation">
<span><i class="fa fa-check-circle-o"></i></span>
Make a reservation
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

parsley.js not working in laravel

I am trying to use parsley.js to validate the user input in client validation but no matter what I tried it doesn't work and have already taken these steps below.
Have downloaded parsley.js from http://parsleyjs.org/dist/parsley.min.js
Then add the path to the script like this: (This is added to the master.blade.php which all other pages extend).
After which I add data-parsley-validate to the form that I want to be validated. And this is the form and how I did it.
#extends('master')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">AJAX Register</div>
<div class="panel-body">
<form class="form-horizontal" id="registration" method="POST" action="{{ url('users/register') }}" data-parsley-validate="">
{!! csrf_field() !!}
<div class="form-group">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" id="name" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" id="email" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password" id="password" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation" id="password_confirmation" data-parsley-equalto="#password" required="">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="green">
<i class="fa fa-btn fa-user"></i> Register
</button>
<a href="{!! asset('login/facebook') !!}">
<div class="btn btn-md btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="blue"> <i class="fa fa-facebook"></i> Login with Facebook </div>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection

If you are using jQuery wrap your parsley code in:
$(document).ready(function(){
// your code here
})
Also post your script code with parsley.

ng-model not working when value set using jQuery

I have a bootstrap popup dialog with some form controls. each control binded using ng-model. to two of the textboxes in the dialog i'm setting the value using jquery when the dialog opens and the rest two are user editable. the two which are user editable for them ng-model is working fine. but for others its not. If i change the value by myself they work properly. but not when value is set using jQuery. I have to set the value using jquery. Struggling from past few days.
Any help will be appreciated.
Here is my code
<body ng-app="my-app" ng-controller="Ctrl">
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="contactUser" class="modal fade openDilog" role="dialog">
<div id="emailform" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-envelope"></span>Contact User</h4>
</div>
<div class="modal-body ">
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Email:</label>
<div class="col-sm-10">
<input type="email" ng-model="email" class="form-control" id="email" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="username">UserName:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="username" id="username" name="username" placeholder="Enter UserName" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control" required ng-model="subject" id="subject" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="message">Message:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" required ng-model="message" id="message" placeholder="Message Goes Here"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" ng-click="Contact()" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Javascript
$('.openDilog').on('show.bs.modal', function (e) {
$(e.currentTarget).find('input[type="email"]').val('email#gmail.com');
$(e.currentTarget).find('input[name="username"]').val('username');
});
var app = angular.module('my-app', []);
app.controller('Ctrl', function($scope){
$scope.Contact = function() {
console.log($scope.email);
console.log($scope.subject);
console.log($scope.message);
console.log($scope.username);
}
});
here is a fiddle i have created for the issue
Fiddle

Working Plnkr
You can do this by accessing scope from outside controller.
HTML: Just add an id attribute in HTML. e.g-> id='outer'
<body ng-app="my-app" ng-controller="Ctrl" id='outer'>
JavaScript:
$('.openDilog').on('show.bs.modal', function (e) {
var scope = angular.element($("#outer")).scope();
scope.$apply(function(){
scope.email = 'email#gmail.com';
scope.username = 'username';
});
});
Hope that solve your problem.

can you init the values in angular scope ?
var app = angular.module('my-app', []);
app.controller('Ctrl', function($scope){
$scope.listUser = [
{email: "test1#test.com", username:"test1"},
{email: "test2#test.com", username:"test2"},
{email: "test3#test.com", username:"test3"},
{email: "test4#test.com", username:"test4"}
];
$scope.Contact = function() {
console.log($scope.email);
console.log($scope.subject);
console.log($scope.message);
console.log($scope.username);
}
$scope.openPopin = function(username, email) {
$scope.email = email;
$scope.username = username;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.1/angular.min.js"></script>
<script>
</script>
<body ng-app="my-app" ng-controller="Ctrl">
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="contactUser" class="modal fade openDilog" role="dialog">
<div id="emailform" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-envelope"></span>Contact User</h4>
</div>
<div class="modal-body ">
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Email:</label>
<div class="col-sm-10">
<input type="email" ng-model="email" class="form-control" id="email" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="username">UserName:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="username" id="username" name="username" placeholder="Enter UserName" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control" required ng-model="subject" id="subject" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="message">Message:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" required ng-model="message" id="message" placeholder="Message Goes Here"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" ng-click="Contact()" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
this is my fiddle with ng-repeat

you can use ui.bootstrap module which do all of the hard work that you trying to do for you

Bootstrap div's overflowing with JQuery modal

I have a minor front end issue. When I load Bootstrap DIV's into the JQuery Modal's body it over flows into the footer instead of expanding the body. Thanks.
<div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<h4>Register</h4>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="fname" placeholder="First Name">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="lname" placeholder="Last Name">
</div>
<div class="col-sm-12"><br></div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email2" placeholder="Confirm Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw" placeholder="Password">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw2" placeholder="Re-type Password">
</div>
<!-- END ADDRESS FORM -->
</div>
</form>
</div>
<div class="modal-footer">
<a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a>
</div>
</div>
</div>
</div>

Add the 'row' class to your .modal-body
http://jsbin.com/fehivowimu/edit?html,output
<div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<h4>Register</h4>
</div>
<div class="modal-body row">
<form action="" method="POST">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="fname" placeholder="First Name">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="lname" placeholder="Last Name">
</div>
<div class="col-sm-12"><br></div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email2" placeholder="Confirm Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw" placeholder="Password">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw2" placeholder="Re-type Password">
</div>
<!-- END ADDRESS FORM -->
</div>
</form>
</div>
<div class="modal-footer">
<a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a>
</div>
</div>
</div>
</div>

angularjs to change css style using directive

I am trying to Manipulate DOM css style using angular , suppose text box value i want to set as height . i assigned ng-model to text box and then ng-style="{height:heightdef}"
How can i acieve this using Directive??
Fiddle ::
http://jsfiddle.net/simmi_simmi987/U5KCg/
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="container">
<div class="row">
<h1>Hello, world! {{hello}}</h1>
<input type="text" />
<div ng-style="{backgroundColor:bgcolordef}">I'm a banner! + {{bgcolordef}}</div>
<div ng-style="{height:heightdef,width:widthdef,backgroundColor:bgcolordef}" class="col-md-10 col-md-offset-1" id="largebox">
<br/>
I am main Box
<a href={{link1}}><div class="smallbox pull-right col-md-2" id="box1" >{{box1label}}</div></a>
<a href={{link2}}><div class="smallbox pull-right col-md-2" id="box3" >{{box3label}}</div></a>
<a href={{link3}}><div class="smallbox pull-right col-md-2" id="box4" >{{box4label}}</div></a>
<!-- <div class="smallbox pull-right col-md-1" id="box5" >box5</div>
<div class="smallbox pull-right col-md-1" id="box6" >box6</div> -->
</div>
</div><!-- row closed -->
<br/><br/><br/><br/>
<div class="row">
<div class="form col-md-5 category">
<!-- Height input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Height</label>
<div class="col-md-9">
<input ng-model="heightdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<!-- Width input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Width</label>
<div class="col-md-9">
<input ng-model="widthdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<!-- BAckground-color input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">BgColor</label>
<div class="col-md-9">
<input ng-model="bgcolordef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<div class="form col-md-5 col-md-offset-1 category">
<div class="form-group indiv-box">
<h3>Box 1:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link1" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box1label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 2:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link2" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box2label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 3:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link3" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box3label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 4:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link4" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box4label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
</div>
</div><!-- row closed -->
<div> <!-- Container closed -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/ng-grid-2.0.7.min.js"></script>
</div>
Javascript ::
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $http) {
$scope.hello="My dear very good morning";
$scope.heightdef=100;
$scope.widthdef=1000;
$scope.box1label="box1";
$scope.box2label="box2";
$scope.box3label="box3";
$scope.box4label="box4";
$scope.link1="box1.html";
$scope.link2="box2.html";
$scope.link3="box3.html";
$scope.link4="box4.html";
});

If I understand your question correctly, this link may be help you to get your answer. This is the link which I was looking for like you.
for short answer:
<div ng-style="{ 'height' : heightdef }"></div>

So here is the updated answer:
You should create derective according angular Directive Documentation
app.directive('myBox', function(){
function link(scope, el, attrs) {
}
return {
scope:{
options: '='
},
restrict: 'E',
link: link,
// here you can use inline template: "<div>..." or templateUrl: 'url to your partial'
};
});
so you can use it like this <my-box options='options'></my-box>
to change options by clicking button:
$scope.setMainBox = function(){
var options = {
heightdef: $scope.heightdef,
widthdef: $scope.widthdef,
bgcolordef: $scope.bgcolordef
};
$scope.options = options;
};
markup
<button ng-click="setMainBox()" class="btn btn-primary btn-default pull-right" > Set main box </button>
here is quick example