In the HTML below, I'm trying to set the selected date range in an ng-model called dateRange. The input text field is getting the selected value correctly, but dateRange still null. What do have I do to solve this problem?
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap.daterangepicker/1/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap.daterangepicker/1/daterangepicker-bs3.css" />
<body ng-app="testApp" ng-controller="testCtrl">
<p>Select Date Range:</p>
<input type="text" name="daterange" id="daterange" ng-model="dateRange" /> Selected Range: {{dateRange}}
<script>
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope, $http) {
$scope.dateRange = null;
});
</script>
<script type="text/javascript">
$(function() {
$('#daterange').daterangepicker();
});
</script>
</body>
</html>
Try wrapping plugin in directive, thumb rule in AngularJS, also load angular after jquery has been loaded
Markup
Directive
Demo Plunkr